Generador de sombras

Con Generador de sombras, diseñadores y desarrolladores de interfaces pueden ajustar una interfaz antes de implementarla. Compón una propiedad box-shadow CSS.

Compón una propiedad box-shadow CSS. La herramienta es gratuita en el navegador y muestra el resultado sin pedirte una cuenta.

Cómo usar

Introduce el desplazamiento horizontal y vertical de la sombra, y después los valores de desenfoque y expansión.
Indica el color en formato hexadecimal, usando seis dígitos precedidos por el signo de almohadilla.
Haz clic en el botón generar para obtener la propiedad box-shadow completa.
Copia la regla producida y pégala en tu hoja de estilos para aplicarla.
Ajusta los valores si el renderizado no coincide con el efecto que deseas.

Ejemplo

La entrada de ejemplo describe una sombra desplazada con desenfoque y un color oscuro. Después de generar, el resultado muestra la propiedad box-shadow correspondiente. Puedes cambiar un valor a la vez para ver cómo influye cada ajuste en la sombra.

Entrada

Resultado

box-shadow: 2px 2px 8px 1px #000000;

Límites y formatos

La herramienta no previsualiza la sombra sobre un elemento; solo proporciona el código CSS.
Los valores de desplazamiento, desenfoque y expansión deben ser numéricos, y los desplazamientos pueden ser negativos.
El color debe ser hexadecimal válido; un color mal formado impide la generación.
El renderizado final depende del navegador y del contexto del elemento.

Dónde se procesa

Todo ocurre en tu navegador. Los ajustes que introduces permanecen en tu dispositivo y nunca se suben ni se almacenan. La propiedad CSS se ensambla localmente, sin conexión externa.

Preguntas frecuentes

¿Qué unidades debo usar para los desplazamientos y el desenfoque?

Normalmente los valores se expresan sin unidad para desplazamientos y desenfoque, ya que representan píxeles. También puedes añadir una unidad como px o rem. Mantén la misma lógica para todos los valores.

¿Puedo usar un color transparente?

El campo espera un color hexadecimal. Para una sombra transparente, puedes usar un color con canal alfa si el formato lo permite, pero el enfoque más sencillo es elegir un color sólido y ajustar la opacidad en tu CSS.

¿Por qué no se ve mi sombra?

Comprueba que la propiedad se aplique a un elemento con un tamaño visible. Un valor de desenfoque o expansión demasiado pequeño puede hacer que la sombra sea invisible. Asegúrate también de que el color no sea idéntico al fondo.