Generador de filtros CSS

Crea una secuencia de filtros

1. Elige un tipo y añade una fila. Las filas nuevas comienzan con valores visualmente neutros; el ejemplo inicial contiene brillo y saturación. Puedes repetir tipos y añadir hasta doce filas.
2. Edita valores, activa o excluye filas y usa los controles para moverlas o duplicarlas. Cada función recibe el resultado de la anterior, por lo que el orden puede cambiar el efecto.
3. Compara la muestra filtrada y la original a la misma escala, o cambia de Ajustar a 100% para explorarla con desplazamiento. Se copia la declaración mostrada incluso en la vista original; los campos activos inválidos dejan el resultado sin disponibilidad.

Entiende la secuencia de funciones

Un filtro es una secuencia de procesamiento de izquierda a derecha, no una pila de sombras separadas por comas. Dos filas de desenfoque siguen siendo dos llamadas. Al desactivar una fila se omite sin moverla; al reactivarla vuelve a su posición.

El brillo, el contraste y la saturación pueden superar el 100% en este editor. La escala de grises, la inversión, la opacidad y la sepia usan el intervalo 0–100%. El ángulo de tono conserva las vueltas introducidas: -450deg no se convierte en 270deg.

Drop-shadow sigue la silueta alfa de la entrada, incluidos los resultados anteriores. Su tercera longitud y blur() usan la desviación estándar gaussiana en píxeles CSS, no el radio de desenfoque de box-shadow. No hay controles inset ni spread; para más sombras se repiten las llamadas.

Una función activada visualmente neutra sigue produciendo un valor filter y puede afectar la agrupación, el apilamiento o el posicionamiento. Borra o desactiva todas las filas para obtener filter: none;.

Ejemplos de orden y transparencia

El ejemplo aplica brightness(125%), blur(1.25px), una sombra con desplazamientos de -6px y 8px, desviación 3px y color rgb(20 40 80 / 35%), y después blur(0.5px). Al excluir la sombra, ambos desenfoques conservan su orden.

Para un canal opaco hipotético con valor de un cuarto, brightness(50%) seguido de invert(100%) produce siete octavos; en orden inverso produce tres octavos. Esto ilustra el orden, no predice los píxeles exactos del navegador.

Dos llamadas opacity(50%) pueden reducir el alfa a un cuarto. Una sombra opaca sin desplazamiento no siempre es neutra sobre contenido semitransparente; una sombra totalmente transparente no añade esa opacidad.

Límites del editor y de la vista previa

El editor numérico admite diez tipos de función con px, porcentajes, grados, color hexadecimal de seis dígitos y opacidad de sombra separada. Los intervalos limitan la interfaz, no toda la gramática CSS. No admite importar CSS arbitrario, filtros SVG personalizados, subir imágenes, imágenes remotas, animación ni exportar imágenes.

La muestra fija es ilustrativa, no tu fotografía o página. Los huecos transparentes y las formas semitransparentes muestran la silueta. El contenido, fondo, diseño y navegador pueden cambiar el resultado; no es una certificación de color, legibilidad o contraste.

Ajustar escala todo el lienzo lógico sin volver a modificar las longitudes CSS. La vista 100% usa la escala de coordenadas CSS y desplazamiento, sin garantizar correspondencia con píxeles físicos. Los márgenes son aproximados, los bordes del desenfoque pueden recortarse y una secuencia extrema puede verse pequeña.

Los valores activos inválidos retiran el CSS actual y la vista normal, sin mantener un resultado anterior. Las filas desactivadas conservan el texto, pero no participan en el CSS ni en la validación activa. Un fallo exclusivo de la vista previa no cambia el CSS válido ni su copia.

Estilos locales sin subir imágenes

La herramienta no añade subidas, solicitudes de imágenes remotas, historial de borradores, enlaces con ajustes ni telemetría con los valores introducidos. La muestra se dibuja con código y la copia es explícita. Esto no garantiza el borrado en servicios existentes del sitio, extensiones o copias guardadas por ti.