filter: brightness(105%) contrast(110%) saturate(130%) sepia(45%);Le générateur de filtres CSS est un éditeur visuel pour la propriété de filtre CSS. Vous déplacez un curseur pour chaque fonction de filtre - flou, luminosité, contraste, saturation, niveaux de gris, sépia, inversion, rotation de teinte et opacité - et regardez l'effet s'appliquer à un aperçu en temps réel, puis copiez le CSS exact qu'il produit.
La propriété Filter applique des effets graphiques tels que le flou, le changement de couleur et le réglage du contraste directement dans le navigateur, sans éditeur d'images requis. Plusieurs fonctions peuvent être enchaînées dans une seule déclaration et sont appliquées dans l'ordre, ce qui montre comment le style photo est construit, tel que le vintage, le chaud et le dramatique. Cet outil gère cette chaîne pour vous et ne produit que les fonctions que vous avez réellement modifiées, en gardant le CSS propre.
Tout se passe dans votre navigateur. Commencez à partir d'un préréglage comme Vintage ou Grayscale, affinez chaque fonction et copiez la déclaration. Aucun compte, aucun téléchargement, et il continue de fonctionner hors connexion une fois la page chargée.
Choisissez un préréglage tel que Vintage, Warm, Cool, Dramatic ou Grayscale pour un look instantané, ou commencez par défaut (aucun filtre appliqué).
Faites glisser le flou, la luminosité, le contraste, le saturation, les niveaux de gris, le sépia, l'inversion, la rotation de la teinte et les curseurs d'opacité. L'aperçu se met à jour instantanément afin que vous puissiez composer le look exact.
Superposez plusieurs fonctions ensemble, par exemple Sepia Plus Contraste et Saturate pour un look de film chaud. L'outil les enchaîne dans le bon ordre automatiquement.
Copiez la déclaration de filtre générée, qui inclut uniquement les fonctions que vous avez modifiées, puis collez-la sur un élément ou une image de votre feuille de style.
Flou, luminosité, contraste, saturation, niveaux de gris, sépia, inversion, rotation de teinte et opacité - chaque fonction de filtre CSS commun avec un curseur dédié
Seules les fonctions que vous modifiez sont écrites dans la déclaration, vous n'envoyez donc jamais de valeurs d'identité redondantes telles que la luminosité (100%).
Un aperçu se met à jour instantanément au fur et à mesure que vous faites glisser, afin que vous puissiez voir l'effet combiné de chaque filtre avant de copier une seule ligne de CSS
Les recettes préparées pour le vintage, le chaud, le cool, le dramatique, la décoloration, le gris, l'inversion et le flou vous donnent un point de départ éprouvé au lieu d'une toile vierge.
Create beautiful CSS gradients with live preview
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset — then copy production-ready CSS.
Pick colors and convert between HEX, RGB, and HSL formats
0 comments
No comments yet. Be the first to share your thoughts!