Generador de filtros CSS

Estilos

Todo se ejecuta en tu navegador: no se sube nada

Aplicar a

Preajuste

Desenfoque

Brillo

Contraste

Saturación

Rotación de matiz

Escala de grises

Sepia

Invertir

Opacidad

Vista previa en vivoCambia cualquier opción de arriba y esto se actualiza al instante

Código CSS

Nueve controles, una declaración `filter` o `backdrop-filter` y una vista previa en vivo. Cada cambio aparece al instante en la vista previa y en el código, sin botón de generar. Solo se escriben los elementos no neutros. `blur(0px)` y `brightness(100%)` son transformaciones identidad: no hacen nada, alargan el código y pueden crear una capa de composición sin necesidad. Por eso un desenfoque cero se omite del todo, y con todos los controles en su valor neutro el resultado es `filter: none`. `backdrop-filter` tiene dos trampas, y ambas van escritas en el comentario entregado: Safari necesita el prefijo `-webkit-`, y un ancestro con `filter` o `transform` lo desactiva; esto último es la causa más común de que un efecto parezca no hacer nada.

Funciones

Nueve filtros: desenfoque, brillo, contraste, saturación, rotación de matiz, escala de grises, sepia, invertir, opacidad
Cambia entre filter en primer plano y backdrop-filter de fondo
El modo de fondo añade un fondo de demostración de color, así el desenfoque y la saturación se ven
Cinco preajustes: cristal esmerilado, blanco y negro, foto antigua, alto contraste, neón
Los elementos neutros se omiten, así que no aparece ningún blur(0px) inútil
backdrop-filter incluye también su línea con prefijo -webkit-
El CSS entregado lleva un comentario sobre las dos trampas, en tu idioma
Cada cambio redibuja la vista previa al instante, sin botón de generar
Todo se ejecuta en tu navegador: no se sube nada

Cómo se usa

Elige a qué se aplica: filter en primer plano o backdrop-filter de fondo
Empieza por un preajuste, o ponlo en personalizado y arrastra los controles
Mira la vista previa y ajusta hasta que quede bien
Copia el CSS de abajo; la línea con prefijo y el comentario van con él

Preguntas frecuentes

¿Cuál es la diferencia entre filter y backdrop-filter?: `filter` actúa sobre el propio elemento: un desenfoque también emborrona su texto y su borde. `backdrop-filter` actúa sobre lo que hay detrás del elemento: procesa lo de debajo mientras el elemento sigue nítido, y así se hace el cristal esmerilado, junto con un color de fondo translúcido. Usa backdrop-filter para desenfocar el fondo de pantalla detrás de una tarjeta, y filter para volver gris o más brillante todo un bloque.
¿Por qué mi backdrop-filter no hace nada?: La causa más común es un ancestro con `filter` o `transform`. Ambos establecen un bloque contenedor o una capa de composición en el ancestro, así que el fondo del que depende el filtro ya no es la zona que espera y toda la declaración deja de funcionar. Recorre la cadena de ancestros para encontrarlo. Causas menos frecuentes son que falte el prefijo `-webkit-` (en Safari) y que el fondo sea simplemente un color plano: un color plano desenfocado sigue siendo un color plano, y parece que no ha pasado nada. El modo de fondo de esta herramienta añade un fondo de color justo para que el efecto se vea.
¿Por qué no hay blur() cuando el desenfoque es cero?: Porque `blur(0px)` es una transformación identidad que no hace nada. Alarga el código, hace que la gente no se atreva a borrarlo y, en algunos navegadores, cualquier valor de `filter` crea una capa de composición que sube la zona a la GPU. Por eso esta herramienta revisa elemento por elemento y omite los valores neutros. Con todos los controles en neutro, la salida es `filter: none` en vez de una cadena vacía: una cadena vacía es una declaración inválida y el contenedor la descartaría entera.
¿Puede un mismo elemento usar filter y backdrop-filter juntos?: Sí. Son declaraciones independientes y se pueden poner las dos: `filter` procesa los píxeles del elemento y `backdrop-filter` lo que hay detrás. Eso sí, cuida el orden y el rendimiento, porque ambas pueden provocar capas de composición; combinarlas en listas largas o animaciones puede afectar a la tasa de fotogramas. Esta herramienta genera una cada vez, así que genera dos veces y combínalas si necesitas las dos.

Herramientas relacionadas

Generador de glassmorphism

Estilos

Ajusta desenfoque, opacidad, saturación y borde, mira el vidrio esmerilado al momento y copia el CSS, con el prefijo -webkit- para iOS.

Generador de sombras CSS

Estilos

Ajusta desplazamiento, desenfoque, propagación, color y capas, previsualiza box-shadow en vivo, con sombra interior, 2 a 5 capas y cinco preajustes.

Cuadrícula transparente

Estilos

Genera el CSS de un fondo transparente: una cuadrícula o rayas a 45°, con colores, tamaño de celda y dos implementaciones de cada patrón.

Generador de degradados CSS

Estilos

Ajusta ángulo, colores y forma, mira la previa al momento y copia el CSS. Lineal, radial y cónico, con parada intermedia opcional.

Generador de border-radius

Estilos

Ajusta el radio de las cuatro esquinas, prévisualo al momento y copia el CSS. Con px, rem y porcentaje: en una caja no cuadrada el porcentaje da elipse.

Generador de neumorphism

Estilos

Ajusta distancia, desenfoque, intensidad y dirección, mira el neumorphism al momento y copia el CSS. Las dos sombras se derivan del fondo, mismo tono.

← Volver a todas las herramientas