Design et Ressources

CSS Filter Générateur

Générer CSS filter values avec a visual effect preview.

Plus dans Design et Ressources

Entrée

CSS Filter Générateur

css filterblurcontrastgenerator

Sortie

Generated CSS filter

Filter

blur(0px) brightness(1.08) contrast(1.12) saturate(1.2) hue-rotate(0deg)

.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);
  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;
}

Filter preview

Live canvas

Outils similaires

Box Shadow Générateur

Générer CSS box-shadow values avec custom offsets et blur.

Flexbox Générateur

Générer flex container CSS avec a live layout preview.

Border Radius Générateur

Générer border-radius CSS de corner values.

CSS Grid Générateur

Générer CSS Grid layouts avec columns, gap, et row sizing.

CSS Button Générateur

Générer styled CSS button code.

CSS Transpourm Générateur

Build CSS transpourm strings de common transpourm values.