Guía Completa del Generador de Box Shadow
¿Qué es Box Shadow?
Box shadow (box-shadow) es una propiedad CSS que agrega efectos de sombra a los elementos. Puede dar profundidad a varios elementos de UI como tarjetas, botones, modales, creando un diseño moderno. Puede crear el efecto de sombra deseado ajustando las opciones offset-x, offset-y, blur, spread, color, inset.
Explicación de Propiedades
• Offset X: Posición horizontal de la sombra. Positivo a la derecha, negativo a la izquierda. • Offset Y: Posición vertical de la sombra. Positivo hacia abajo, negativo hacia arriba. • Blur: Grado de desenfoque de la sombra. 0 es nítido, valores más altos son más borrosos. • Spread: Grado de expansión de la sombra. Positivo expande, negativo contrae. • Color: Color de la sombra. Soporta formatos HEX, RGBA. • Inset: Sombra interior. Marcado aplica sombra dentro del elemento.
Cómo Usar
Paso 1: Seleccione una combinación popular en la pestaña Preestablecidos o configure directamente en la pestaña Personalizado. Paso 2: Ajuste el offset, blur, spread, color y opacidad de cada capa. Paso 3: Agregue capas adicionales si es necesario para crear efectos de sombra compuestos. Paso 4: Marque inset para crear sombra interior. Paso 5: Confirme en la vista previa y copie el código CSS para aplicar a su proyecto.
Casos de Uso
• Agregar sombra con profundidad a tarjetas UI • Dar efecto tridimensional a efectos hover en botones • Efecto flotante en modales/popups • Implementar diseño Neumorfismo • Crear efecto cóncavo con sombra inset • Expresar sombra natural con múltiples capas
Preguntas frecuentes (FAQ)
- Q. ¿Cómo es la compatibilidad con navegadores?
- A. La propiedad box-shadow es totalmente compatible con todos los navegadores modernos (Chrome, Firefox, Safari, Edge). También funciona en IE9 y superior.
- Q. ¿Cuántas capas puedo agregar?
- A. Técnicamente no hay límite, pero agregar demasiadas capas puede afectar el rendimiento. Generalmente 1-3 capas son lo más común.
- Q. ¿Qué es el color RGBA?
- A. RGBA es una notación de color que representa Rojo, Verde, Azul, Alpha (transparencia). El valor Alpha va de 0 (completamente transparente) a 1 (completamente opaco), y se usa para ajustar la transparencia de la sombra.