Playground de Filtros CSS
Ajusta 9 funciones de filtro CSS con sliders y mira la vista previa al instante (suelta tu propia imagen o usa el bloque de gradiente integrado). Seis presets — Cool, Warm, B&N, Sepia, Vintage, Invertido — te llevan la mayor parte del camino. La salida es una regla CSS `filter` lista para pegar y una clase de valor arbitrario Tailwind.
filter: none;
filter-none
Cómo usar
- Ajusta sliders o pulsa un preset para empezar.
- Opcionalmente, suelta una imagen para previsualizar sobre contenido real.
- Copia la regla CSS o la clase Tailwind.
Preguntas frecuentes
- ¿Por qué el blur en px pequeño apenas se nota?
- El blur CSS usa un radio gaussiano — más de ~10px ya se nota. El slider llega hasta 20px; blurs mayores rara vez son útiles en UI.
- ¿Qué hace 'invert' a los colores?
- Reemplaza cada canal por 255 − valor. Útil para trucos de modo oscuro, pero invierte la imagen completa incluyendo fotos — usualmente lo querrás solo en íconos o texto.
- ¿Por qué los sliders sin cambiar no aparecen en la salida?
- La regla CSS filter solo incluye las funciones que cambiaste (p. ej. brightness(100%) es el default y se omite).
- ¿Clase Tailwind con valor arbitrario?
- Tailwind tiene atajos integrados (blur-md, contrast-125) pero no todos los valores. La clase `filter-[…]` arbitraria te deja embarcar cualquier filtro como utility — útil al prototipar.
Herramientas relacionadas
Desenfoque de imagen
Aplica desenfoque Gaussiano, de caja o de movimiento a cualquier imagen en tu navegador. Radio ajustable 0-64 px, con el filtro CSS equivalente listo para copiar.
Playground de CSS Flexbox
Elige visualmente flex-direction, justify-content, align-items y gap — copia el CSS o la clase Tailwind.
Playground de CSS Grid
Elige visualmente grid-template-columns / rows, gap y alineación de ítems — copia el CSS a tu proyecto.
Efecto Duotono de Imagen
Aplica un efecto duotono de dos colores a cualquier imagen — elige color de sombra y color de luz, ajusta midpoint y contraste, descarga el resultado. Carátulas estilo Spotify en dos clics.
Generador de CSS clip-path (polígono, círculo)
Generador visual de la propiedad CSS `clip-path` — elige una forma (círculo, elipse, inset o polígono), ajusta números con sliders o haz clic en la vista previa para añadir puntos del polígono, y copia una declaración CSS lista para pegar. Incluye 10 presets (triángulo, hexágono, estrella, flecha, bocadillo, plus, …).
Generador de Gradientes CSS
Crea gradientes CSS lineales o radiales con varias paradas de color y copia el código.