Générateur de filtres CSS

Créer une séquence de filtres

1. Choisissez un type et ajoutez une ligne. Les nouvelles lignes commencent avec des valeurs visuellement neutres ; l'exemple initial contient luminosité et saturation. Les types peuvent être répétés, jusqu'à douze lignes.
2. Modifiez les valeurs, activez ou excluez des lignes, déplacez-les ou dupliquez-les. Chaque fonction reçoit le résultat de la précédente : l'ordre peut donc modifier l'effet.
3. Comparez l'exemple filtré et l'original à la même échelle ou passez d'Ajuster à 100 % pour faire défiler. La déclaration affichée est copiée même dans la vue originale ; une valeur active invalide rend le résultat indisponible.

Comprendre la séquence de fonctions

Un filtre est une séquence de traitement de gauche à droite, et non une pile d'ombres séparées par des virgules. Deux lignes de flou restent deux appels. Désactiver une ligne l'omet sans la déplacer ; elle reprend sa place à la réactivation.

La luminosité, le contraste et la saturation peuvent dépasser 100 % dans cet éditeur. Niveaux de gris, inversion, opacité et sépia utilisent la plage 0–100 %. L'angle de teinte conserve les tours saisis : -450deg n'est pas remplacé par 270deg.

Drop-shadow suit la silhouette alpha de l'entrée, y compris les résultats précédents. Sa troisième longueur et blur() utilisent l'écart type gaussien en pixels CSS, pas le rayon de flou de box-shadow. Il n'y a ni inset ni spread ; répétez les appels pour ajouter des ombres.

Une fonction active visuellement neutre produit tout de même une valeur filter et peut influer sur le regroupement, l'empilement ou le positionnement. Effacez ou désactivez toutes les lignes pour obtenir filter: none;.

Exemples d'ordre et de transparence

L'exemple applique brightness(125%), blur(1.25px), une ombre décalée de -6px et 8px avec un écart type de 3px et la couleur rgb(20 40 80 / 35%), puis blur(0.5px). Sans l'ombre, les deux flous conservent leur ordre.

Pour un canal opaque hypothétique valant un quart, brightness(50%) puis invert(100%) donne sept huitièmes ; dans l'ordre inverse, trois huitièmes. Cela illustre l'ordre sans prédire les pixels exacts du navigateur.

Deux appels opacity(50%) peuvent réduire l'alpha à un quart. Une ombre opaque sans décalage n'est pas forcément neutre sur un contenu semi-transparent ; une ombre entièrement transparente n'ajoute pas cette opacité.

Limites de l'éditeur et de l'aperçu

L'éditeur numérique prend en charge dix fonctions avec px, pourcentages, degrés, couleur hexadécimale à six chiffres et opacité d'ombre séparée. Les plages limitent l'interface, pas toute la grammaire CSS. Aucun import CSS arbitraire, filtre SVG personnalisé, téléversement, image distante, animation ou export matriciel n'est prévu.

L'exemple fixe est illustratif, pas votre photo ou page. Les trous transparents et les formes semi-transparentes montrent la silhouette. Le contenu, le fond, la mise en page et le navigateur peuvent changer l'aspect ; ce n'est pas une certification de couleur, lisibilité ou contraste.

Ajuster redimensionne toute la zone logique sans modifier à nouveau les longueurs CSS. La vue 100 % utilise l'échelle des coordonnées CSS et le défilement, sans garantir une correspondance aux pixels physiques. Les marges sont approximatives, les bords flous peuvent être coupés et une séquence extrême peut paraître petite.

Une valeur active invalide retire le CSS courant et l'aperçu normal sans conserver un ancien résultat. Les lignes désactivées conservent leur texte mais sont exclues du CSS et de la validation active. Une panne limitée à l'aperçu ne change pas le CSS valide ni sa copie.

Styles locaux sans envoi d'images

L'outil n'ajoute ni téléversement, requête d'image distante, historique de brouillons, lien contenant les réglages, ni télémétrie contenant les valeurs saisies. L'exemple est créé en code et la copie est explicite. Cela ne garantit pas l'effacement auprès des services existants, extensions ou copies conservées ailleurs.