Galerie CSS `backdrop-filter`

Définitions et exemples visuels de toutes les fonctions applicables aux arrière-plans

← devweb

Règles de la propriété `backdrop-filter`

backdrop-filter: function(value) [function2(value2)];

Principe : Applique des effets graphiques (flou, inversion, saturation, etc.) à la zone située derrière l'élément.
Condition d'opacité : L'élément porteur doit impérativement être semi-transparent (ex: rgba()) pour laisser apparaître l'arrière-plan filtré.
Fonctions supportées : blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia() et drop-shadow().
Compatibilité WebKit : Pensez à doubler systématiquement votre code avec le préfixe -webkit-backdrop-filter pour Safari.

1. Flou Gaussien (blur) blur(px)

blur(12px)

Code CSS appliqué

backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);

2. Luminosité (brightness) brightness(%)

brightness(150%)

Code CSS appliqué

backdrop-filter: brightness(150%); -webkit-backdrop-filter: brightness(150%);

3. Contraste (contrast) contrast(%)

contrast(180%)

Code CSS appliqué

backdrop-filter: contrast(180%); -webkit-backdrop-filter: contrast(180%);

4. Niveau de Gris (grayscale) grayscale(%)

grayscale(100%)

Code CSS appliqué

backdrop-filter: grayscale(100%); -webkit-backdrop-filter: grayscale(100%);

5. Rotation de Teinte (hue-rotate) hue-rotate(deg)

hue-rotate(180deg)

Code CSS appliqué

backdrop-filter: hue-rotate(180deg); -webkit-backdrop-filter: hue-rotate(180deg);

6. Négatif / Inversion (invert) invert(%)

invert(100%)

Code CSS appliqué

backdrop-filter: invert(100%); -webkit-backdrop-filter: invert(100%);

7. Opacité du Filtre (opacity) opacity(%)

opacity(40%)

Code CSS appliqué

backdrop-filter: opacity(40%); -webkit-backdrop-filter: opacity(40%);

8. Saturation (saturate) saturate(%)

saturate(300%)

Code CSS appliqué

backdrop-filter: saturate(300%); -webkit-backdrop-filter: saturate(300%);

9. Effet Sépia (sepia) sepia(%)

sepia(90%)

Code CSS appliqué

backdrop-filter: sepia(90%); -webkit-backdrop-filter: sepia(90%);

10. Ombre Portée d'Arrière-plan (drop-shadow) drop-shadow()

drop-shadow()

Code CSS appliqué

backdrop-filter: drop-shadow(0px 10px 15px rgba(0, 0, 0, 0.8)); -webkit-backdrop-filter: drop-shadow(0px 10px 15px rgba(0, 0, 0, 0.8));