Design e Recursos

CSS Filter Gerador

Gerar CSS filter values com a visual effect preview.

Mais de Design e Recursos

Entrada

CSS Filter Gerador

css filterblurcontrastgenerator

Saída

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

Ferramentas relacionadas

Box Shadow Gerador

Gerar CSS box-shadow values com custom offsets e blur.

Flexbox Gerador

Gerar flex container CSS com a live layout preview.

Border Radius Gerador

Gerar border-radius CSS de corner values.

CSS Grid Gerador

Gerar CSS Grid layouts com columns, gap, e row sizing.

CSS Button Gerador

Gerar styled CSS button code.

CSS Transparam Gerador

Build CSS transparam strings de common transparam values.