DevToolPal
ES

Generador de sombras CSS (box-shadow)

Diseña sombras CSS de forma visual: apila varias capas, ajusta desplazamiento, desenfoque, extensión, color e inset, con vista previa en vivo, ajustes predefinidos y CSS listo para copiar.

Se ejecuta en local, nunca se sube

Capas de sombra

Sin sombra. Añade una capa o elige un ajuste predefinido.

Vista previa

Color de la caja
Fondo

CSS

Predefinidos
CSS de box-shadow
 
 
 
 
 
Qué hace


El generador de sombras te permite diseñar sombras CSS a ojo y copiar la declaración box-shadow terminada. Apila todas las capas que necesites, ajusta el desplazamiento, desenfoque, extensión, color y opacidad de cada una, conviértela en sombra interior y la vista previa se actualiza al instante. También puedes pegar un valor box-shadow existente para editarlo visualmente. Todo se ejecuta en tu navegador.


Cómo usarlo


    

  1. Empieza con un ajuste predefinido o conserva la sombra de ejemplo.
    2. 

  2. Elige una capa con los botones Capa o usa + Añadir capa para apilar otra encima.
    3. 

  3. Arrastra Desplazamiento horizontal, Desplazamiento vertical, Desenfoque y Extensión, elige un Color y baja la Opacidad para un resultado más suave. Activa Interior para una sombra hacia dentro.
    4. 

  4. Ajusta el Color de la caja, el Fondo y el Radio de esquina de la vista previa para que coincidan con tu página. Solo afectan a la vista previa.
    5. 

  5. Copia el código de la tarjeta CSS.
    6. 



El cuadro CSS de box-shadow de abajo es editable: pega una sombra de tu hoja de estilos o herramienta de diseño y los controles la leen. Las longitudes en rem o em se convierten a px a razón de 16px.


Ejemplo


.card {
  box-shadow:
    0 4px 6px -1px rgb(0 0 0 / 0.1),
    0 12px 24px -6px rgb(30 64 175 / 0.25);
}


Consejos para sombras naturales


    

  • Usa poca opacidad. Un negro del 5–25 % parece realista; las sombras oscuras y sólidas pesan.
    • 

  • La extensión negativa evita que un desenfoque grande se escape por los lados: es el truco de la mayoría de las sombras de “tarjeta”.
    • 

  • Tiñe la sombra. Una sombra con un poco del tono del fondo o de la marca se ve más rica que el gris puro.
    • 

  • Luz desde un solo lado. Mantén positivo el desplazamiento vertical en todas las capas para que coincidan en la dirección de la luz.
    • 

  • Rendimiento. Grandes desenfoques en muchos elementos pueden ralentizar el desplazamiento en móviles modestos; anima opacity o transform en lugar de la propia sombra.
    • 

 
  
 
Preguntas frecuentes
 
 
  › ¿Qué significan los cuatro números de box-shadow?  
En orden: desplazamiento horizontal, desplazamiento vertical, radio de desenfoque y radio de extensión. Los desplazamientos positivos mueven la sombra a la derecha y hacia abajo. El desenfoque suaviza el borde y no puede ser negativo. La extensión agranda la sombra (positiva) o la reduce (negativa) antes de aplicar el desenfoque.
 
  › ¿Por qué usar varias capas de sombra?  
Las sombras reales son nítidas cerca del objeto y se desvanecen lejos de él. Apilar dos o más capas, por ejemplo una pequeña y nítida y otra grande y suave, se ve mucho más natural que un único desenfoque oscuro. Así construyen sus niveles de elevación la mayoría de los sistemas de diseño.
 
  › ¿Qué hace inset?  
inset dibuja la sombra dentro de la caja en lugar de fuera, como si el elemento estuviera hundido. Se usa en campos de texto, botones pulsados y brillos interiores. Puedes mezclar capas inset y exteriores en un mismo box-shadow.
 
  › ¿box-shadow sigue el border-radius?  
Sí. La sombra adopta la forma del elemento, incluidas las esquinas redondeadas, por eso la vista previa usa el radio que indiques. No sigue las partes transparentes de una imagen; para eso usa el filtro CSS drop-shadow().