Ir al contenido
Rotina Diária

Generador de sombras box-shadow CSS

Crea sombras CSS con varias capas, sombra interior y vista previa en tiempo real, y copia el código listo para usar.

Sugerencias

Procesado en tu dispositivo. Nada de lo que escribes se envía.

Cómo usar: Generador de sombras box-shadow CSS

  1. Ajusta el desplazamiento horizontal y vertical, el desenfoque, la expansión, el color y la opacidad de cada sombra.
  2. Añade más capas para crear sombras realistas o elige uno de los estilos prediseñados.
  3. Copia la línea box-shadow y pégala en tu CSS.

Acerca de esta herramienta

La propiedad box-shadow recibe, en este orden: desplazamiento X, desplazamiento Y, desenfoque, extensión y color; inset es opcional para las sombras interiores. Los valores separados por comas se superponen, y así se consiguen sombras más naturales: una capa corta y definida junto a otra larga y suave imita la luz real.

Prefiere el negro con baja opacidad (del 10 % al 25 %) en lugar de grises sólidos: la sombra se adapta a cualquier fondo. La extensión negativa concentra la sombra debajo del elemento, un efecto común en tarjetas y botones flotantes.

Preguntas frecuentes

¿Cuál es la diferencia entre box-shadow y drop-shadow?

box-shadow sigue el rectángulo (y el border-radius) del elemento. El filtro drop-shadow sigue la forma real del contenido, incluidas las áreas transparentes de los archivos PNG y SVG.

¿Las sombras hacen que el sitio web sea más lento?

Las sombras estáticas tienen un costo bajo. Evita animar box-shadow directamente; para los efectos al pasar el cursor, anima la opacidad de un pseudoelemento con sombra.

¿De verdad es gratis? ¿Hay un límite diario?

Es gratis y no tiene límite diario. Como el procesamiento se realiza en tu dispositivo, no tenemos costos por uso ni necesitamos limitarte.

¿Funciona en el celular?

Sí. El sitio funciona en cualquier navegador moderno en Android, iPhone, Windows, Mac y Linux, sin instalar nada.

Herramientas relacionadas

Ver todo — Herramientas relacionadas
Generador de border-radius CSS Redondea cada esquina por separado, crea formas elípticas y orgánicas y copia el CSS con vista previa en vivo. Generador de gradientes CSS Crea gradientes lineales, radiales y cónicos con varios colores y copia el código CSS listo para usar. Conversor de colores Convierte colores entre HEX, RGB, HSL, HSV y CMYK, y comprueba el contraste WCAG entre dos colores. Minificar CSS, HTML y JSON Reduce el tamaño de CSS, HTML y JSON al quitar comentarios y espacios sin alterar su funcionamiento. Crear ZIP Combina varios archivos de cualquier tipo en un único archivo .zip comprimido, directamente en el navegador. Extraer ZIP Abre archivos .zip sin instalar nada: consulta su contenido y descarga solo los archivos que quieras. Formatear JSON Formatea, valida y minifica JSON con resaltado de errores. Codificar y decodificar Base64 Convierte texto o archivos a Base64 y viceversa.