Generador/analizador de Box Shadow CSS
Opciones
Vista previa en vivo
Acerca del generador/analizador de Box Shadow CSS
Esta herramienta le ayuda a crear valores de `box-shadow` CSS de forma visual y a analizar cadenas `box-shadow` existentes.
Es útil para el diseño de UI, depuración de CSS, sistemas de diseño y experimentación rápida con sombras.
Cómo utilizar la herramienta
- Introduzca valores de offset, blur, spread, color e `inset` para generar una sombra.
- O pegue una cadena `box-shadow` existente en el campo de entrada y haga clic en Analizar.
- Revise la vista previa en vivo.
- Copie el valor CSS generado cuando se vea bien.
Consejos
- Los valores de desenfoque más grandes crean sombras más suaves.
- La dispersión negativa puede hacer que las sombras parezcan más definidas.
- Las sombras insertadas son útiles para elementos de la interfaz de usuario presionados o empotrados.
- Los colores RGBA son ideales cuando quieres sombras suaves y transparentes.
Comprobaciones de box-shadow antes de aplicar elevación
Las sombras comunican profundidad y foco, pero afectan contraste percibido, clipping, rendimiento y consistencia entre temas.
Define la escala de elevación
Usa pocos niveles deliberados en vez de valores únicos para cada card, botón, modal y estado hover.
Revisa clipping y overflow
Inspecciona sombras en scroll containers, padres redondeados, transforms, dialogs, sticky headers y bordes del viewport.
Prueba temas claro y oscuro
Ajusta opacidad, spread, blur y color para que las sombras sean sutiles en claro y visibles sin niebla en oscuro.
Mide superficies grandes
Evita animar sombras costosas en elementos grandes o repetidos si transform, opacity o pseudo-elementos bastan.
Herramientas relacionadas
Estas herramientas también pueden resultarle útiles.