Retour

Design et Ressources

Générateur de CSS Filtre

Générez des valeurs CSS de filtre avec un aperçu de l'effet visuel.

Catégorie

Design et Ressources

Tags

css FiltreblurcontrastGénérateur
Plus dans Design et Ressources
Entrée

Générateur de CSS Filtre

css FiltreblurcontrastGénérateur
Exemples rapides
Sortie

Generated CSS Filtre

Filtre
blur(0px) brightness(1.08) contrast(1.12) saturate(1.2) hue-rotate(0deg) grayscale(0) sepia(0) invert(0)
Niveaux de gris
0%
.filter-preview {
  width: min(100%, 340px);
  border-radius: 24px;
  overflow: hidden;
  filter: blur(0px) brightness(1.08) contrast(1.12) saturate(1.2) hue-rotate(0deg) grayscale(0) sepia(0) invert(0);
  box-shadow: 0 18px 36px rgba(15,23,42,0.14);
}

.filter-preview .hero {
  min-height: 160px;
  background: radial-gradient(circle at 20% 20%, #38bdf8, transparent 30%), radial-gradient(circle at 80% 30%, #8b5cf6, transparent 35%), linear-gradient(145deg, #111827, #0f172a);
}

.filter-preview .copy {
  padding: 16px 18px;
  background: white;
  color: #0f172a;
}
Filtre Aperçu
Live canvas