Bac à sable des filtres CSS
CSS Filter Playground
Empile flou, luminosité, saturation, teinte et ombre portée sur un échantillon et rend le CSS obtenu.
Empile les fonctions de filtre CSS sur un échantillon et vous donne la déclaration. L’aperçu est rendu par la propriété `filter` du navigateur lui-même : ce que vous voyez est par définition ce que fait le CSS, et non une approximation. Le supplément ici est la `feColorMatrix` équivalente : toutes ces fonctions sauf le flou et le drop-shadow sont affines en RGBA, si bien qu’une chaîne de huit s’effondre en vingt nombres.
Aperçu
Rendu par la propriété filter du navigateur lui-même : ce que vous voyez est ce que fait le CSS ci-dessous, et non une approximation.
CSS
Filtres
Comment s’en servir
Choisissez ce que vous regardez
Les aplats montrent ce qui arrive à des couleurs précises, le dégradé montre ce qui arrive sur une plage entière y compris les gris, et votre propre image montre ce qui arrive à la chose que vous filtrez réellement. Jugez sur la dernière avant de livrer.
Déplacez les fonctions dont vous avez besoin
Tout ce qui reste à sa valeur neutre est entièrement omis de la sortie, si bien que le CSS reste aussi court que ce que vous avez réellement changé. L’ordre compte et suit l’ordre de la liste.
Ajoutez drop-shadow en dernier si vous en voulez une
C’est un bloc à part parce qu’elle prend trois nombres et une couleur plutôt qu’une seule quantité, et parce qu’elle suit le canal alpha : elle épouse la forme d’un PNG transparent plutôt que sa boîte.
Prenez le CSS, ou prenez la matrice
Le CSS est pour une feuille de style. La `feColorMatrix` est pour un filtre SVG, un shader, ou tout pipeline où exécuter huit passes pour faire ce que fait une multiplication matricielle vaut la peine d’être évité.
Questions fréquentes
Pourquoi le flou manque-t-il dans la matrice ?
Parce qu’il est spatial : un pixel flouté dépend de ses voisins, et une matrice de couleur ne regarde jamais qu’un pixel à la fois. Il en va de même pour drop-shadow. Le panneau nomme celles qui n’ont pas pu être fondues et les laisse comme une étape séparée plutôt que de les abandonner discrètement.
hue-rotate(180deg) ne m’a pas donné la couleur complémentaire.
Elle ne la donne jamais. La fonction est une rotation autour de l’axe de luminance du cube RGB non linéaire, que la spécification définit avec une matrice fixe : ce n’est pas une rotation de teinte perceptuelle et ce n’était pas conçu pour l’être. Pour une vraie complémentaire, faites tourner la teinte en OKLCH avec le convertisseur de couleurs ou le générateur de palette.
grayscale(1) utilise-t-il les bons coefficients de luminance ?
Il utilise ceux qu’impose la spécification : Rec. 709, appliqués à des valeurs encodées en gamma. Appliquer des poids de luminance à des valeurs non linéaires est, à la rigueur, faux — une désaturation correcte linéarise d’abord. La spécification dit de faire ainsi et les navigateurs le font, donc ceci reproduit l’écart plutôt que de le corriger, parce que s’accorder avec le navigateur est le but.
Est-ce que cela couvre backdrop-filter ?
Les fonctions sont les mêmes, donc la valeur que vous copiez y est valide aussi. Ce qui diffère, c’est la source — `backdrop-filter` filtre ce qui est peint derrière l’élément, pas l’élément —, donc l’aperçu ici ne vous dira pas de quoi a l’air un panneau dépoli au-dessus de votre vrai contenu. Collez-le dans la page et regardez.
À alimenter depuis
Générateur d’ombre portée
Box Shadow Generator
Compose des ombres de boîte et de texte en plusieurs couches avec un aperçu en direct, et rend le CSS.
Sélecteur de couleur
Colour Picker
Choisit une couleur sur un champ OKLCH, à la pipette sur l’écran ou depuis une image, et la copie dans la notation de votre choix.
Convertisseur de formats de couleur
Colour Format Converter
Convertit une couleur entre HEX, RGB, HSL, HWB, LAB, LCH et OKLCH et nomme la couleur connue la plus proche.
Vérificateur de contraste
Contrast Checker
Note un couple texte et fond selon WCAG 2 et APCA et propose la couleur conforme la plus proche.
Ensuite
Ces outils acceptent ce que celui-ci produit : le résultat peut y aller directement.
Formater ou minifier du CSS
CSS Beautifier & Minifier
Met en forme ou minifie du CSS sans rien réordonner, en conservant le flux de jetons à l’identique.
Luminosité et couleurs
Brightness & Colour Adjust
Règle la luminosité, le contraste, la saturation, la température et la netteté, histogramme à l’appui et en direct.
Générateur d’ombre portée
Box Shadow Generator
Compose des ombres de boîte et de texte en plusieurs couches avec un aperçu en direct, et rend le CSS.
Convertisseur de formats de couleur
Colour Format Converter
Convertit une couleur entre HEX, RGB, HSL, HWB, LAB, LCH et OKLCH et nomme la couleur connue la plus proche.
Sélecteur de couleur
Colour Picker
Choisit une couleur sur un champ OKLCH, à la pipette sur l’écran ou depuis une image, et la copie dans la notation de votre choix.
Vérificateur de contraste
Contrast Checker
Note un couple texte et fond selon WCAG 2 et APCA et propose la couleur conforme la plus proche.