Laboratorio de filtros CSS
CSS Filter Playground
Apila filtros de desenfoque, brillo, saturación, tono y sombra sobre una muestra y emite el CSS.
Apila las funciones de filtro CSS sobre una muestra y te da la declaración. La vista previa la dibuja la propia propiedad `filter` del navegador, así que lo que ves es por definición lo que hace el CSS y no una aproximación. Lo extra aquí es el `feColorMatrix` equivalente: todas estas funciones salvo blur y drop-shadow son afines en RGBA, así que una cadena de ocho colapsa en veinte números.
Vista previa
Lo dibuja la propiedad filter del propio navegador, así que esto es lo que hace el CSS de abajo, no una aproximación.
CSS
Filtros
Cómo se usa
Elige qué mirar
Las muestras planas enseñan qué pasa con colores concretos, el degradado enseña qué pasa a lo largo de un rango incluidos los grises, y tu propia imagen enseña qué pasa con lo que realmente estás filtrando. Juzga sobre esta última antes de publicar.
Mueve las funciones que necesites
Todo lo que quede en su valor neutro se omite por completo de la salida, así que el CSS es tan corto como lo que realmente cambiaste. El orden importa y sigue el orden de la lista.
Añade drop-shadow al final si quieres una
Es un bloque aparte porque toma tres números y un color en lugar de una sola cantidad, y porque sigue el canal alfa: sigue la forma de un PNG transparente y no su caja.
Toma el CSS, o toma la matriz
El CSS es para una hoja de estilos. El `feColorMatrix` es para un filtro SVG, un shader, o cualquier canalización donde merezca la pena evitar correr ocho pasadas para hacer lo que hace una multiplicación de matriz.
Preguntas frecuentes
¿Por qué falta blur en la matriz?
Porque es espacial: un píxel desenfocado depende de sus vecinos, y una matriz de color solo mira un píxel cada vez. Lo mismo pasa con drop-shadow. El panel nombra las que no pudieron colapsar y las deja como un paso aparte en lugar de descartarlas en silencio.
hue-rotate(180deg) no me dio el color complementario.
Nunca lo da. La función es una rotación alrededor del eje de luminancia del cubo RGB no lineal, que la especificación define con una matriz fija: no es una rotación perceptual de tono y no se diseñó para serlo. Para un complementario real, rota el tono en OKLCH con el conversor de color o el generador de paletas.
¿grayscale(1) usa los coeficientes de luminancia correctos?
Usa los que manda la especificación: Rec. 709, aplicados a valores con codificación gamma. Aplicar pesos de luminancia a valores no lineales es, estrictamente, incorrecto: una desaturación correcta linealiza primero. La especificación dice que se haga así y los navegadores lo hacen, así que esto reproduce el desajuste en lugar de corregirlo, porque coincidir con el navegador es el objetivo.
¿Esto cubre backdrop-filter?
Las funciones son las mismas, así que el valor que copias también es válido ahí. Lo que difiere es la fuente —`backdrop-filter` filtra lo que está pintado detrás del elemento, no el elemento—, así que la vista previa de aquí no te dirá cómo se ve un panel esmerilado sobre tu contenido real. Pégalo en la página y mira.
Puede recibir de
Generador de sombras CSS
Box Shadow Generator
Compone sombras de caja y de texto en varias capas con vista previa en vivo, y emite el CSS.
Selector de color
Colour Picker
Elige un color en un plano OKLCH, con el cuentagotas de pantalla o desde una imagen que subas, y lo copia en cualquier notación.
Conversor de códigos de color
Colour Format Converter
Convierte un color entre HEX, RGB, HSL, HWB, LAB, LCH y OKLCH, y nombra el color conocido más próximo.
Comprobador de contraste
Contrast Checker
Puntúa una pareja de color de texto y fondo contra WCAG 2 y APCA, y propone el color válido más cercano.
Después
Estas aceptan lo que produce esta herramienta, así que el resultado puede pasar directamente.
Formateador y minificador de CSS
CSS Beautifier & Minifier
Formatea o minifica CSS sin reordenar nada, conservando exactamente el flujo de tokens.
Ajuste de brillo y color
Brightness & Colour Adjust
Regula brillo, contraste, saturación, temperatura y nitidez con un histograma en vivo.
Generador de sombras CSS
Box Shadow Generator
Compone sombras de caja y de texto en varias capas con vista previa en vivo, y emite el CSS.
Conversor de códigos de color
Colour Format Converter
Convierte un color entre HEX, RGB, HSL, HWB, LAB, LCH y OKLCH, y nombra el color conocido más próximo.
Selector de color
Colour Picker
Elige un color en un plano OKLCH, con el cuentagotas de pantalla o desde una imagen que subas, y lo copia en cualquier notación.
Comprobador de contraste
Contrast Checker
Puntúa una pareja de color de texto y fondo contra WCAG 2 y APCA, y propone el color válido más cercano.