Generador de box-shadow CSS

¿Qué es Generador de box-shadow CSS?

El generador de box-shadow CSS es un editor visual gratuito de la propiedad box-shadow, pensado para desarrolladores front-end y diseñadores. Añade una o varias capas de sombra y ajusta en cada una el offset-x, el offset-y, el radio de desenfoque, el radio de expansión, el color y la opción inset con sencillos campos numéricos y un selector de color. Un recuadro de vista previa sobre un fondo de cuadrícula muestra el resultado combinado en tiempo real, y se genera la declaración box-shadow completa —separando cada capa con comas— para que la copies. Úsalo para crear sombras de elevación suaves, neumorfismo nítido, efectos de brillo o profundidad por capas al estilo Material sin memorizar el orden de los valores.

Cómo usar Generador de box-shadow CSS

1. Ajusta el offset-x y el offset-y de la primera capa (en px) para mover la sombra en horizontal y vertical; los valores negativos la mueven a la izquierda o hacia arriba.
2. Modifica el radio de desenfoque (lo suave que es la sombra) y el radio de expansión (cuánto crece o se reduce).
3. Elige un color con la muestra o escribe un valor hexadecimal: un hex de 8 dígitos como #00000040 define la transparencia de la sombra.
4. Marca la casilla inset para dibujar la sombra dentro del elemento en lugar de fuera.
5. Haz clic en Añadir capa para apilar otra sombra encima y edita los valores para ajustarla; elimina cualquier capa con su botón de papelera.
6. Observa cómo se actualiza la vista previa y copia el CSS de box-shadow generado en tu hoja de estilos.

Ejemplos

x 0, y 4, desenfoque 12, expansión 0, color #00000040

box-shadow: 0px 4px 12px 0px #00000040;

Capa 1: 0 1 2 0 #0000001a · Capa 2: 0 8 24 -4 #00000026

box-shadow: 0px 1px 2px 0px #0000001a, 0px 8px 24px -4px #00000026;

inset marcado, x 0, y 2, desenfoque 6, expansión 0, color #00000059

box-shadow: inset 0px 2px 6px 0px #00000059;

Preguntas frecuentes

¿Cuál es el orden de los valores de box-shadow?

Cada capa se escribe como offset-x, offset-y, radio de desenfoque, radio de expansión y color, con la palabra clave inset opcional delante. Esta herramienta siempre escribe las cuatro longitudes en px (offset-x, offset-y, desenfoque, expansión), así que el orden es inequívoco y fácil de ajustar a mano después.

¿Puedo añadir una sombra semitransparente o de color?

Sí. Escribe cualquier color CSS en el campo de color: un hex completo de 8 dígitos como #00000040 (los dos últimos dígitos son el alfa) da una sombra semitransparente, y también puedes usar colores con nombre o cualquier hex. La muestra del selector gestiona colores sólidos #rrggbb; para el alfa, edita el campo de texto.

¿Cómo apilo varias sombras?

Haz clic en Añadir capa por cada sombra extra. El CSS generado separa cada capa con comas en orden, de arriba abajo: la primera capa se pinta la última (encima). Úsalo para profundidad por capas al estilo Material o para combinar un brillo exterior con un realce inset.

¿Qué hace la casilla inset?

Inset dibuja la sombra dentro del borde del elemento, creando un aspecto hundido o de brillo interior en lugar de una sombra exterior. Márcala por capa; puedes mezclar sombras inset y exteriores en el mismo valor de box-shadow.

¿Se suben mis datos a algún sitio?

No. El generador se ejecuta por completo en tu navegador con JavaScript: tus colores y valores nunca se envían a un servidor, así que funciona de forma privada e incluso sin conexión una vez cargada la página.