Generador CSS box-shadow

Generador de box-shadow CSS con controles de desplazamiento, desenfoque, extensión, color e inset y vista previa en vivo. Copia el CSS listo para usar, gratis en tu navegador.

box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.15);

Fondo

Color de la caja

Sombra exterior

Inset

Desplazamiento X: 4px

Desplazamiento Y: 4px

Desenfoque: 10px

Extensión: 0px

Color

Insertar

<iframe src="https://devtools.patrache.studio/es/generators/css-box-shadow/?embed=1" width="100%" height="620"
  style="border:1px solid #e5e7eb;border-radius:12px" loading="lazy"
  title="Generador CSS box-shadow — Patrache Studio DevTools"></iframe>
<p><a href="https://devtools.patrache.studio/es/generators/css-box-shadow/">Generador CSS box-shadow</a> by
   <a href="https://patrache.studio/">Patrache Studio</a></p>

Última actualización: 2026 · Herramienta en línea gratuita

¿Qué es Generador CSS box-shadow?

Generador de box-shadow CSS con controles de desplazamiento, desenfoque, extensión, color e inset y vista previa en vivo. Copia el CSS listo para usar, gratis en tu navegador.

Cómo usar

1
Seleccionar preset— Comience rápidamente con un botón de preset.
2
Ajustar deslizadores— Ajuste la sombra con los deslizadores de desplazamiento X/Y, desenfoque y propagación.
3
Vista previa— Verifique el resultado en tiempo real en la vista previa superior.
4
Copiar CSS— Use el botón de copiar para obtener el CSS box-shadow.

Herramientas relacionadas

Generador de degradado CSSGenerador visual de degradados CSS lineales, radiales y cónicos: añade paradas de color, ajusta el ángulo y copia el CSS. Perfecto para fondos y botones, gratis en tu navegador.

Generador CSS border-radiusGenerador de border-radius CSS con ocho controles de esquina independientes, deslizadores y vista previa en vivo de la forma redondeada. Copia el CSS listo para usar, gratis en tu navegador.

Generador CSS FlexboxPlayground de CSS Flexbox con editor visual para justify-content, align-items, flex-direction y wrap, con vista previa en vivo. Genera CSS Flexbox listo para copiar, gratis en tu navegador.

Convertidor de coloresConversor de color entre códigos HEX, RGB, HSL y OKLCH, con la relación de contraste WCAG de dos colores. Comprueba la accesibilidad mientras eliges paleta, gratis en tu navegador.

Preguntas frecuentes

Sí, use el botón 'Agregar sombra' para superponer múltiples sombras.

Sí, active la casilla Inset en cada sombra para crear una sombra interior.

Se proporcionan cinco presets: Subtle, Medium, Large, Inset y Double.

Sí, puede ingresar directamente rgba(0,0,0,0.15) en el campo de color.

No. Todos los cálculos se realizan en el navegador.