CSS filter : Flou, luminosité, contraste et plus
Maîtrisez la propriété CSS filter — blur, brightness, contrast, grayscale, hue-rotate et drop-shadow.
La propriété CSS filter applique des effets graphiques aux éléments. Contrairement à l'édition d'images dans Photoshop, les filtres CSS sont en temps réel et non destructifs.
Les filtres sont appliqués comme une liste de fonctions. L'ordre compte : chaque filtre est appliqué au résultat du précédent.
Qu'est-ce que CSS filter
La propriété CSS filter accepte une liste de fonctions de filtre séparées par des espaces. Les filtres s'appliquent à l'élément et à tout son contenu y compris les enfants.
Outil gratuit Générateur de Filtres CSS Créez des effets de filtre CSS avec aperçu en directblur() et brightness()
blur(rayon) applique un flou gaussien. brightness(quantité) ajuste la luminosité : brightness(1) inchangé, brightness(0) est noir.
contrast(), grayscale(), sepia()
contrast(quantité) ajuste le contraste. grayscale(quantité) supprime la couleur : grayscale(1) est entièrement en niveaux de gris. sepia(quantité) applique une teinte brun chaud.
Outil gratuit Simulateur de Daltonisme Prévisualisez l'apparence de vos designs pour les utilisateurs daltonienshue-rotate() et saturate()
hue-rotate(angle) fait pivoter la teinte de toutes les couleurs. saturate(quantité) ajuste l'intensité des couleurs : saturate(0) est en niveaux de gris, saturate(2) est fortement saturé.
drop-shadow() vs box-shadow
drop-shadow() crée une ombre qui suit la forme de l'élément, y compris les zones transparentes dans les images. box-shadow ne suit que le rectangle délimiteur de l'élément.
Combiner plusieurs filtres
Les filtres multiples sont appliqués de gauche à droite. filter : brightness(1.2) contrast(1.1) saturate(1.3) crée une image vibrante.
Outil gratuit Générateur de Glassmorphisme Créez des effets de verre dépoli avec backdrop-filter et flou