EspañolES

Generador de filtros CSS

Mueve los controles deslizantes y la vista previa y el código del filtro cambian a la vez.

Tus textos y archivos no salen de tu navegador: no se envía nada a ningún servidor.

Arrastra un archivo aquí o haz clic para elegirlo
Código CSS

Cómo se usa

  1. Viene cargada una imagen de ejemplo. Para usar la tuya, suéltala en el recuadro de abajo.
  2. Mueve un control o elige un ajuste predefinido y el efecto se aplica al instante. Los valores que dejas por defecto no aparecen en el código.
  3. Mantén presionado el botón del ojo para comparar con la imagen sin filtro.
  4. Copia el código CSS o, en los navegadores compatibles, presiona “Descargar” para guardar un PNG con el filtro aplicado.

Preguntas frecuentes

¿Importa el orden de las funciones del filtro?

Sí. Los filtros se aplican de izquierda a derecha, así que cambiar el orden cambia el resultado. Esta herramienta siempre los escribe en el mismo orden.

¿En qué se diferencia drop-shadow de box-shadow?

box-shadow dibuja una sombra alrededor de la caja rectangular del elemento, mientras que drop-shadow sigue la forma visible real y omite las zonas transparentes. Es ideal para PNG transparentes e iconos.

¿Por qué no aparece el botón Descargar?

Se oculta en los navegadores que no admiten filtros en canvas, como algunas versiones de Safari. Aun así puedes copiar y usar el código CSS.

Herramientas relacionadas

Degradado CSSDegradados lineales, radiales y cónicosFoto en blanco y negroEscala de grises, sepia e invertirConversor de imágenesConvierte entre JPG, PNG y WebPArte ASCIITexto y fotos hechos con caracteres

Todas las herramientas