Generador de Sombras de Caja
El Generador de sombras de caja es una herramienta CSS visual gratuita que le ayuda a crear hermosas sombras de caja para sus elementos web sin escribir código manualmente. Ya sea que necesite una sombra sutil para un componente de tarjeta, un efecto de resplandor intenso para un botón CTA o múltiples sombras en capas para un efecto 3D dramático, este generador le da control completo sobre cada parámetro de sombra. Ajuste el desplazamiento horizontal y vertical, radio de desenfoque, radio de propagación, color y opacidad con controles deslizantes y selectores de color intuitivos. Alterne entre sombras interiores y exteriores. Agregue múltiples capas de sombra y vea el resultado en tiempo real en un elemento de vista previa en vivo. La herramienta genera código CSS limpio y compatible con todos los navegadores listo para copiar y pegar en su hoja de estilos.
Qué es
La propiedad CSS box-shadow agrega efectos de sombra alrededor del marco de un elemento. Una sombra de caja se puede describir por los desplazamientos X e Y relativos al elemento, radio de desenfoque y propagación, color y si la sombra aparece dentro o fuera del elemento. La sintaxis de box-shadow: box-shadow: offset-x offset-y blur-radius spread-radius color inset; Comprendiendo cada parámetro: - offset-x: Distancia horizontal de la sombra desde el elemento. Valores positivos mueven a la derecha, valores negativos a la izquierda. - offset-y: Distancia vertical. Valores positivos mueven hacia abajo, valores negativos hacia arriba. - blur-radius: Qué tan borroso es el borde de la sombra. 0 significa un borde nítido, valores más altos crean sombras más suaves. No puede ser negativo. - spread-radius: Expande o contrae el tamaño de la sombra. Valores positivos hacen la sombra más grande que el elemento, valores negativos la hacen más pequeña. - color: Cualquier valor de color CSS (hex, rgb, rgba, hsl, colores nombrados). Usar rgba con transparencia alfa crea sombras realistas. - inset (opcional): Cuando está presente, la sombra se dibuja dentro del elemento en lugar de fuera. Por qué usar box-shadow en diseño web: - Profundidad y elevación: Las sombras crean jerarquía visual haciendo que los elementos parezcan flotar sobre la superficie - Cumplimiento de Material Design: El sistema Material Design de Google usa profundidad de sombra para indicar jerarquía de componentes - Estados de enfoque y hover: Las sombras proporcionan retroalimentación visual en elementos interactivos - Pulido estético: Incluso sombras sutiles hacen que las interfaces se vean más refinadas y profesionales - Diferenciación de tarjetas: Las sombras ayudan a separar tarjetas de fondos en diseños basados en tarjetas El generador admite múltiples capas de sombra (separadas por comas), permitiéndole apilar múltiples efectos de sombra en un solo elemento para resultados más realistas o dramáticos.
Cómo usar
- Habilite o deshabilite capas de sombra individuales usando las casillas de verificación. Comience con una capa de sombra y agregue más según sea necesario haciendo clic en el botón' Agregar sombra'. Cada capa se puede configurar de forma independiente.
- Ajuste el desplazamiento horizontal (desplazamiento-x) con el control deslizante. Los valores positivos desplazan la sombra a la derecha del elemento, los valores negativos a la izquierda. Vea la actualización de la vista previa en tiempo real mientras arrastra.
- Establezca el desplazamiento vertical (desplazamiento-y) para controlar qué tan arriba o debajo del elemento aparece la sombra. Los valores positivos mueven la sombra hacia abajo, simulando una fuente de luz desde arriba.
- Aumente el radio de desenfoque para obtener sombras más suaves y difusas. Un valor de 0 produce una sombra de bordes afilados; los valores entre 5 y 20 píxeles crean sombras de aspecto natural para la mayoría de los elementos de la interfaz de usuario. Los valores muy altos (30 píxeles+) crean efectos de brillo.
- Ajuste con precisión el radio de dispersión para expandir o contraer la sombra. Los valores negativos pueden tensar la sombra alrededor del elemento, lo que resulta útil para crear efectos de bordes nítidos. Los valores positivos hacen que la sombra sea más grande que el elemento en sí.
- Elija el color de su sombra con el selector de color. Habilite el control deslizante de opacidad para ajustar la transparencia; las sombras realistas suelen usar rgba(0, 0, 0, 0.1-0.3). Pruebe diferentes colores para efectos de brillo creativos (por ejemplo, brillo azul para botones de neón).
- Active la casilla de verificación 'Recuadro' para cambiar entre sombras externas y externas. Las sombras insertadas se dibujan dentro del elemento, creando una apariencia presionada o empotrada útil para entradas de formulario y botones presionados.
- Copie el código CSS generado desde el panel de salida con un solo clic. El código incluye todos los prefijos de proveedores para compatibilidad entre navegadores. Péguelo directamente en su hoja de estilo o atributo de estilo en línea.
Ejemplos
Entrada: X:0 Y:4px Blur:12px Spread:0 Color:rgba(0,0,0,0.15)
Proceso: Combine offset + blur + color → CSS box-shadow syntax
Resultado: box-shadow: 0 4px 12px 0 rgba(0,0,0,0.15);
Entrada: X:2px Y:2px Blur:8px Spread:-2px Color:#3b82f6
Proceso: Multi-shadow layering → Offset calculation
Resultado: box-shadow: 2px 2px 8px -2px #3b82f6;
Búsquedas Relacionadas
La gente también busca: generador de sombras de caja, sombra de caja css, generador de sombras, sombra css.
generador de sombras de cajasombra de caja cssgenerador de sombrassombra css
Preguntas Frecuentes
¿Cuál es la diferencia entre sombra de cuadro y sombra de texto?
box-shadow se aplica a elementos a nivel de bloque (divs, secciones, tarjetas, botones) creando sombras alrededor del cuadro rectangular del elemento. text-shadow se aplica al contenido de texto dentro de un elemento, creando sombras detrás de las formas reales de las letras. Usan una sintaxis similar (desplazamiento-x, desplazamiento-y, desenfoque, color) pero box-shadow tiene características adicionales como spread-radius y palabras clave insertadas.
¿Puedo crear varias sombras en un elemento?
¡Sí! Las sombras de varias cajas se definen separando valores de sombra entre comas. La herramienta admite capas de sombras ilimitadas. Las sombras múltiples permiten efectos más realistas, por ejemplo, combinando una sombra oscura ajustada para una profundidad inmediata con una sombra más suave y grande para sombrear el ambiente. El orden importa: la primera sombra de la lista aparece en la parte superior, con las sombras posteriores superpuestas detrás.
¿Qué color debo usar para sombras realistas?
Para obtener los resultados más realistas, use una versión oscura de su color de fondo con baja opacidad. El negro puro con una opacidad del 15-25% (rgba (0,0,0,0.15-0. 25)) funciona bien en fondos claros. En fondos de colores, use un tono más oscuro del color de fondo. Evite las sombras completamente opacas, ya que no se ven naturales. Para efectos de brillo de color, use colores brillantes con una opacidad del 30 al 60%.
¿Box-shadow es compatible con todos los navegadores?
Sí, box-shadow tiene un excelente soporte para navegadores. Funciona en todos los navegadores modernos, incluidos Chrome, Firefox, Safari, Edge y Opera, sin prefijos de proveedor. Para navegadores muy antiguos (IE 8 y versiones anteriores), box-shadow no es compatible, pero esos navegadores tienen una cuota de mercado insignificante en la actualidad. El CSS generado incluye el prefijo - webkit-para una máxima compatibilidad.
¿Cómo creo una sombra estilo Material Design?
Material Design utiliza valores de sombra específicos para diferentes niveles de elevación. Valores comunes: Nivel 1: 0 1px 3px rgba (0,0,0,0. 12), 0 1px 2px rgba(0,0,0,0. 24). Nivel 2: 0 3px 6px rgba (0,0,0,0. 16), 0 3px 6px rgba(0,0,0,0. 23). Nivel 3: 0 10px 20px rgba (0,0,0,0. 19), 0 6px 6px rgba(0,0,0,0. 23). Superponer dos sombras por nivel (una más ajustada y otra difusa) crea el característico efecto de profundidad de Material Design.