Playground de Filtros CSS
Color
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
Simulador de Daltonismo
Ve cómo se ve tu imagen para personas con cada uno de los 8 tipos de deficiencia visual cromática (CVD).
Generador de CSS Box Shadow
Diseña box-shadow CSS visualmente con varias capas, vista previa en vivo y salida CSS / Tailwind lista para copiar.
Conversor de Formatos de Color
Convierte cualquier color entre HEX, RGB, HSL, HSV, OKLCH y una variable CSS.
Generador de Gradientes CSS
Crea gradientes CSS lineales o radiales con varias paradas de color y copia el código.
Generador de Paleta de Colores
Crea paletas armoniosas desde un color base con seis esquemas.
Comprobador de Contraste de Color
Comprueba el contraste texto/fondo según los niveles WCAG AA y AAA.