Generador de sombras CSS (box-shadow)
Diseña sombras CSS de forma visual con varias capas, sombras interiores, desenfoque, expansión y color. Vista previa en vivo, exporta CSS, SCSS o Tailwind.
Cargando Generador de box-shadow CSS…
Tus archivos nunca salen de tu dispositivo
Cómo usar Generador de box-shadow CSS
- 1
Abre Generador de box-shadow CSS en esta página. Se carga directamente en tu navegador.
- 2
Añade tu archivo, texto o valores y ajusta la configuración.
- 3
Copia o descarga el resultado. No se sube ni se guarda nada.
Acerca de esta herramienta
La propiedad CSS box-shadow da profundidad a tarjetas, botones e imágenes, pero escribir los valores a mano es ir a ciegas. Este generador de box-shadow te permite diseñar la sombra con controles deslizantes y verla en una caja de vista previa en vivo, y luego copiar código limpio en CSS, SCSS o como entrada de configuración de Tailwind.
Cómo crear una sombra
- Ajusta el desplazamiento horizontal y vertical para mover la sombra.
- Aumenta el desenfoque para un borde más suave y ajusta la expansión para agrandarla o reducirla.
- Elige el color y la opacidad.
- Marca inset para colocar la sombra dentro de la caja.
- Añade más capas, duplícalas o elimínalas, y activa o desactiva cada una.
- Cambia el color de la caja y el fondo de la vista previa para que coincidan con tu diseño, y copia el código.
Sintaxis de box-shadow
box-shadow: [inset] offset-x offset-y blur spread color;
Por ejemplo box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15); da una sombra suave justo debajo del elemento. Se pueden combinar varias sombras separadas por comas, y la primera se dibuja encima.
Recetas de sombras
- Tarjeta suave: desplazamiento pequeño, desenfoque grande y opacidad baja, por ejemplo 0 4px 12px con negro al 10 a 15 por ciento.
- Profundidad realista: dos capas, una más oscura y ajustada cerca del elemento y otra amplia y muy ligera más lejos.
- Botón presionado: una sombra interior en el borde superior.
- Brillo o neón: sin desplazamiento, desenfoque grande y una sombra de color vivo; superpón dos colores para más intensidad.
- Sombra concentrada: una expansión negativa mantiene la sombra más estrecha que la caja, para que solo se vea debajo.
Consejos
- Mantén una sola dirección de luz en toda la interfaz, normalmente desde arriba, para que todas las sombras apunten igual.
- Tiñe las sombras con una versión oscura del color de fondo en lugar de negro puro para un aspecto más natural.
- Vigila el rendimiento: desenfoques muy grandes en muchos elementos pueden ralentizar el desplazamiento en móviles antiguos.
Combina las sombras con esquinas redondeadas del generador de border-radius y fondos del generador de degradados CSS.
Preguntas frecuentes
¿Qué significan los valores de box-shadow?
En orden: desplazamiento horizontal, desplazamiento vertical, radio de desenfoque, radio de expansión y color. Añade la palabra inset al principio para dibujar la sombra dentro del elemento.
¿Cómo añado más de una sombra?
Añade otra capa en el generador. En CSS, varias sombras se escriben en una sola propiedad box-shadow, separadas por comas.
¿Qué es una sombra inset?
Una sombra dibujada dentro del borde del elemento en lugar de fuera, muy usada en botones presionados y campos de formulario.
¿Puedo obtener la sombra como clase de Tailwind?
Sí. La exportación Tailwind te da una entrada boxShadow para tailwind.config.js, así puedes usar la sombra como clase personalizada, por ejemplo shadow-custom.
¿Qué hace una expansión negativa?
Hace la sombra más pequeña que el elemento, de modo que solo asoma por el lado del desplazamiento, lo que da una sombra más ajustada y concentrada.
¿Por qué mi sombra se ve demasiado oscura?
Baja la opacidad, aumenta el desenfoque o usa un tono oscuro del color de fondo en lugar de negro puro.