Sintassi

Significato dei valori principali:

• none: Nessun effetto viene applicato allo sfondo.

• blur(px): Applica un effetto di sfocatura. Esempio: blur(10px).

• brightness(%): Regola la luminosità dello sfondo. brightness(150%) lo rende più luminoso.

• contrast(%): Regola il contrasto. contrast(80%) diminuisce il contrasto.

• saturate(%): Modifica la saturazione dei colori. saturate(200%) aumenta la vividezza.

• grayscale(%) / sepia(%): Converte i colori in scala di grigi o seppia.

• multiple filters: È possibile concatenare più filtri separandoli con uno spazio. Esempio: blur(5px) brightness(120%).

Esempio proprietà: backdrop-filter

Codice Esempio: backdrop-filter

CODE: CSS

1. .backdrop-filter-container {

2.   background-image: url('https://images.unsplash.com/photo-1523413651479-597eb2da0ad6');

3.   background-size: cover;

4.   background-position: center;

5.   height: 300px;

6.   position: relative;

7.   border-radius: 12px;

8.   overflow: hidden;

9. }

11. .backdrop-filter-box {

12.   position: absolute;

13.   top: 50%;

14.   left: 50%;

15.   transform: translate(-50%, -50%);

16.   backdrop-filter: blur(8px) brightness(120%);

17.   background-color: rgba(255, 255, 255, 0.3);

18.   padding: 30px 50px;

19.   border-radius: 10px;

20.   color: #1d3557;

21.   font-size: 20px;

22.   text-align: center;

23. }

Contenuto Esempio: backdrop-filter

  
  <style>
    .backdrop-filter-container {
      background-image: url('https://images.unsplash.com/photo-1523413651479-597eb2da0ad6');
      background-size: cover;
      background-position: center;
      height: 300px;
      position: relative;
      border-radius: 12px;
      overflow: hidden;
    }

    .backdrop-filter-box {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      backdrop-filter: blur(1px) brightness(100%);
      background-color: rgba(255, 255, 255, 0.3);
      border: 2px solid rgba(255, 255, 255, 0.2);
      padding: 30px 50px;
      border-radius: 10px;
      color: #1d3557;
      font-size: 20px;
      text-align: center;
    }
  </style>
  
  <div class="backdrop-filter-container">
    <div class="backdrop-filter-box">
      Effetto vetro con <code>backdrop-filter</code>
    </div>
  </div>
  

⚠️ Nota compatibilità:
La proprietà CSS backdrop-filter è supportata nei browser moderni, ma non è compatibile con Internet Explorer e alcuni browser mobili. Per una copertura migliore, prevedi un fallback visivo per i browser non supportati.

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser