Voltar

Design e Recursos

Gerador de CSS Filtro

Gere valores CSS de filtro com pré-visualização do efeito visual.

Categoria

Design e Recursos

Tags

css FiltroblurcontrastGerador
Mais de Design e Recursos
Entrada

Gerador de CSS Filtro

css FiltroblurcontrastGerador
Exemplos rápidos
Saída

Generated CSS Filtro

Filtro
blur(0px) brightness(1.08) contrast(1.12) saturate(1.2) hue-rotate(0deg) grayscale(0) sepia(0) invert(0)
Tons de cinza
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;
}
Filtro Prévia
Live canvas