Box Shadow Generator
Generador de box shadow CSS gratuito. Ajusta offset, blur, spread, color e inset. Vista previa en vivo y copia código CSS. Perfecto para diseñadores y desarrolladores.
box-shadow: 0px 4px 6px 1px #00000020;Acerca de Box Shadow Generator
Box Shadow Generator se ejecuta completamente en su navegador. Sus datos permanecen en su dispositivo — no hay carga a ningún servidor.
Generador de box shadow CSS gratuito. Ajusta offset, blur, spread, color e inset. Vista previa en vivo y copia código CSS. Perfecto para diseñadores y desarrolladores. Gratis, sin registro, privacidad primero.
Cómo usar Box Shadow Generator
Diseña sombras CSS visualmente y copia el código al instante. Ajusta el desenfoque, la propagación, el desplazamiento y el color sin escribir CSS a mano.
- 1
Establece las propiedades de la sombra
Ajusta el desplazamiento horizontal y vertical, el radio de desenfoque y la propagación usando los controles deslizantes.
- 2
Elige un color y opacidad
Selecciona un color de sombra y establece su opacidad. Las sombras más oscuras y con menor opacidad se ven más naturales.
- 3
Añade inset si es necesario
Activa inset para crear una sombra interior en lugar de una exterior.
- 4
Copia el CSS
Haz clic en Copiar para copiar el código CSS box-shadow generado a tu portapapeles.
Consejos
- •Superpon múltiples sombras para dar profundidad: combina una sombra oscura y nítida con una más suave y clara.
- •Mantén el radio de desenfoque mayor que la propagación para una sombra suave y realista.
- •Las sombras se ven mejor con un ligero desplazamiento vertical y baja opacidad.
Herramientas Relacionadas
Más Herramientas de Generators
Preguntas Frecuentes
¿El generador de sombras es gratuito?
Sí, nuestro generador de sombras es completamente gratuito y sin límites. Puedes crear sombras ilimitadas y copiar el código CSS al instante.
¿Puedo crear múltiples sombras?
Sí. Puedes superponer múltiples sombras con diferentes desplazamientos, desenfoque, propagación y colores para crear efectos complejos de profundidad y brillo.
¿Puedo copiar el código CSS?
Sí. La propiedad CSS box-shadow generada se muestra en un cuadro de código. Haz clic en copiar para obtener código listo para pegar en tu hoja de estilos.
¿El generador de sombras funciona sin conexión?
Sí. Toda la generación ocurre en tu navegador, por lo que la herramienta funciona sin conexión a internet una vez que la página se ha cargado.