Generador de box-shadow CSS
La propiedad CSS box-shadow añade sombra a un elemento y crea sensación de profundidad. Puede usarse en tarjetas, modales, menús, botones o imágenes. El generador permite ajustar desplazamiento horizontal, desplazamiento vertical, desenfoque, expansión, color e inset.
La sintaxis básica es: box-shadow: offset-x offset-y blur spread color. Un desenfoque alto crea una sombra suave; una expansión positiva agranda la sombra; inset coloca la sombra dentro del elemento. Pequeños cambios producen efectos muy distintos.
Uso visual y rendimiento
Sombras sutiles suelen verse más profesionales que sombras muy oscuras. Mantén coherencia entre componentes para que la interfaz no parezca desordenada. En listas enormes o animaciones, demasiadas sombras complejas pueden afectar rendimiento; prueba en dispositivos reales si el diseño es pesado.
El generador de box-shadow de esta página trabaja con capas. Cada capa conserva desplazamiento horizontal, desplazamiento vertical, desenfoque, expansión, color, opacidad y la opción inset. Al mover un control, la vista previa se actualiza de inmediato y el CSS final se compone como una lista separada por comas dentro de una sola propiedad box-shadow. Esto permite crear una sombra simple para una tarjeta, pero también efectos más complejos como material design, brillo neón o sombra interna sin escribir la sintaxis manualmente.
La conversión del color usa el valor hexadecimal seleccionado y lo transforma a rgba(r,g,b,a), donde la opacidad se calcula dividiendo el porcentaje entre 100. Por eso una opacidad de 25 produce un alfa de 0.25, y un valor de 70 genera una sombra mucho más visible. Los presets no son imágenes: cambian los mismos parámetros que podría ajustar el usuario. Si necesita un resultado reutilizable, copie el bloque CSS completo y pruébelo sobre el componente real, porque el fondo, el radio del borde y el tamaño del elemento cambian mucho la percepción de la sombra.
Para interfaces limpias conviene empezar con valores bajos de desenfoque y expansión negativa, especialmente en tarjetas pequeñas. Las sombras grandes funcionan mejor en modales, menús flotantes o elementos que deben parecer elevados. Una sombra coloreada puede reforzar un estado activo, pero usada en exceso reduce la legibilidad. La opción de fondo de la vista previa ayuda a comprobar si la sombra sigue siendo visible sobre superficies claras u oscuras antes de llevar el código al proyecto.
Si combina varias capas, lea el orden de izquierda a derecha como una pila: todas forman una sola propiedad y el navegador las renderiza juntas. Mantenga nombres o comentarios en su CSS si el valor se vuelve largo, porque una sombra con muchas capas puede ser difícil de mantener después.
Comentarios