Generador de box-shadow CSS
Diseña sombras CSS (box-shadow) ajustando desplazamiento, desenfoque, expansión, color, opacidad y modo interior, con vista previa en tiempo real. Copia el código listo para pegar. 100% en el navegador.
0px
8px
24px
-4px
20%
box-shadow: 0px 8px 24px -4px rgba(17, 17, 16, 0.2);
Otras herramientas
Preguntas frecuentes
- ¿Qué parámetros controla box-shadow?
- box-shadow define el desplazamiento horizontal (X), el vertical (Y), el desenfoque (blur), la expansión (spread), el color y, opcionalmente, si la sombra es interior (inset). Esta herramienta te deja ajustar todos con sliders y ver el resultado al instante.
- ¿Qué es una sombra "inset"?
- Una sombra inset se dibuja dentro del elemento en lugar de hacia fuera, creando una sensación de profundidad hundida. Es útil para campos de formulario, botones presionados o efectos de relieve.
- ¿Cómo consigo una sombra suave y realista?
- Usa un desplazamiento Y pequeño (4-10px), un desenfoque alto (20-40px), una expansión ligeramente negativa y una opacidad baja (10-25%). Esto imita la luz natural y evita sombras duras poco naturales.
- ¿Puedo usar el código en cualquier framework?
- Sí. El código generado es CSS estándar y funciona en cualquier proyecto: HTML puro, React, Vue, Tailwind (con clases arbitrarias), etc. Solo copia la línea box-shadow y pégala en tu estilo.
- ¿Se procesa todo en mi navegador?
- Sí, la vista previa y la generación del código ocurren localmente. No se envía nada a ningún servidor y la herramienta es totalmente gratuita.