FrançaisFR

Générateur de filtres CSS – flou, luminosité, niveaux de gris

Déplacez les curseurs : l’aperçu et le code du filtre se mettent à jour en même temps.

Vos textes et fichiers restent dans votre navigateur : rien n’est envoyé à un serveur.

Déposez un fichier ici ou cliquez pour le choisir
Code CSS

Mode d’emploi

  1. Une image d’exemple est chargée. Pour utiliser la vôtre, faites-la glisser dans la zone en dessous.
  2. Déplacez un curseur ou choisissez un préréglage : l’effet s’applique aussitôt. Les réglages laissés à leur valeur par défaut n’apparaissent pas dans le code.
  3. Maintenez le bouton en forme d’œil enfoncé pour comparer avec l’image sans filtre.
  4. Copiez le code CSS ou, dans les navigateurs compatibles, enregistrez avec « Télécharger » un PNG avec le filtre appliqué.

Questions fréquentes

L’ordre des fonctions de filtre a-t-il une importance ?

Oui. Les filtres s’appliquent de gauche à droite, donc un autre ordre donne un autre résultat. Cet outil les écrit toujours dans le même ordre.

Quelle différence entre drop-shadow et box-shadow ?

box-shadow dessine une ombre autour du cadre rectangulaire de l’élément, alors que drop-shadow suit la forme réellement visible et ignore les zones transparentes. C’est idéal pour les PNG transparents et les icônes.

Pourquoi n’y a-t-il pas de bouton « Télécharger » ?

Il est masqué dans les navigateurs qui ne prennent pas en charge les filtres sur canvas, comme certaines versions de Safari. Vous pouvez quand même copier et utiliser le code CSS.

Outils similaires

Dégradé CSSDégradés linéaires, radiaux, coniquesPhoto noir et blancGris, sépia et négatifConvertisseur d’imagesConvertir JPG, PNG et WebPGénérateur d’ASCII artTexte et photos en caractères

Tous les outils