Générateur de filtres CSS

Qu'est-ce que Générateur de filtres CSS ?

Applique la propriété CSS filter à une image en temps réel. Combinez blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia et drop-shadow, comparez le résultat à l'original et copiez le code. Vous pouvez utiliser l'image d'exemple intégrée ou charger la vôtre, qui reste sur votre appareil.

Comment utiliser Générateur de filtres CSS

1. Choisissez un préréglage (Noir et blanc, Vintage, Chaud, Froid, Dramatique…) ou partez de Aucun.
2. Déplacez les curseurs de chaque fonction de filtre.
3. Activez drop-shadow() et réglez ses décalages, son flou, sa couleur et son opacité si besoin.
4. Cliquez sur Utiliser votre image pour tester avec un fichier local.
5. Copiez le code CSS.

Exemple

blur 2px, brightness 120%, hue-rotate -90°, sepia 50%, drop-shadow on (4px 4px 6px, black at 0.5)

filter: blur(2px) brightness(120%) hue-rotate(-90deg) sepia(50%) drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));

Quand utiliser Générateur de filtres CSS

Utilisez-le pour des effets de survol d'images, une mise en forme homogène de photos, des arrière-plans assombris et des ombres qui suivent les formes de PNG/SVG transparents (drop-shadow). Il ne modifie pas le fichier image lui-même ; pour des retouches définitives, utilisez un éditeur d'images ou les outils d'image du site. Pour agir sur ce qui se trouve derrière un élément plutôt que sur l'élément, utilisez backdrop-filter (voir le générateur de glassmorphism).

Comment fonctionne Générateur de filtres CSS

Seules les fonctions différentes de leur valeur neutre sont écrites (par exemple brightness est omis à 100 %), dans un ordre fixe : blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia, drop-shadow. L'ordre compte en CSS car chaque fonction s'applique au résultat de la précédente. Sans aucun changement, la sortie est filter: none;. Votre image est affichée via une URL d'objet locale et n'est jamais envoyée.

Cas d'utilisation courants

• ✓ Effets de survol du niveau de gris à la couleur sur des logos
• ✓ Styles de photos vintage ou chauds dans des galeries
• ✓ Assombrir des images de bandeau sous du texte
• ✓ Ombres autour d'icônes PNG transparentes avec drop-shadow()
• ✓ Aperçus rapides de type daltonisme avec hue-rotate

Questions Fréquentes

Explorer d'autres catégories