Generador de Box Shadow CSS
Generador online gratuito de box-shadow CSS. Crea sombras hermosas visualmente con desplazamiento, desenfoque, extensión, color e inset ajustables. Vista previa en vivo y copia instantánea.
¿Qué es CSS box-shadow?
CSS box-shadow es una propiedad CSS que añade efectos de sombra alrededor del marco de un elemento. Te permite crear sombras paralelas, sombras internas y múltiples capas de sombra especificando desplazamiento, radio de desenfoque, radio de extensión y valores de color.
¿Cuáles son los parámetros de box-shadow?
La propiedad box-shadow acepta varios valores: desplazamiento horizontal (X), desplazamiento vertical (Y), radio de desenfoque, radio de extensión, color y la palabra clave opcional inset. También puedes especificar múltiples sombras separadas por comas.
¿Qué es la palabra clave inset?
La palabra clave inset cambia la sombra de una sombra externa (sombra paralela) a una sombra interna. Cuando se especifica inset, la sombra se dibuja dentro del borde del elemento en lugar de fuera, creando un efecto de inserción.
¿Qué es el radio de desenfoque?
El radio de desenfoque determina cuánto se difumina el borde de la sombra. Un valor de 0 crea un borde nítido y sólido. Valores más grandes crean una sombra más difusa y suave que se extiende más lejos del elemento.
¿Qué es el radio de extensión?
El radio de extensión expande o contrae el tamaño de la sombra. Valores positivos hacen la sombra más grande que el elemento, mientras que valores negativos la hacen más pequeña. Esto afecta a la sombra antes de aplicar el desenfoque.
¿Cómo creo múltiples sombras?
Puedes crear múltiples sombras separando cada definición de sombra con una coma. Cada sombra puede tener diferentes valores de desplazamiento, desenfoque, extensión y color. Las sombras se aplican en el orden en que se declaran, siendo la primera sombra la superior.
¿Puedo usar colores RGBA para las sombras?
Sí, puedes usar cualquier formato de color CSS incluyendo RGBA, HSLA, HEX o colores con nombre. RGBA y HSLA son particularmente útiles para crear sombras semitransparentes que se mezclan naturalmente con los fondos.
¿Cómo copio el código CSS generado?
Simplemente haz clic en el botón "Copiar Código" en la interfaz del generador. El código CSS se copiará al portapapeles y podrá pegarse directamente en tu hoja de estilos o archivo HTML.
¿box-shadow es compatible con todos los navegadores?
Sí, box-shadow es compatible con todos los navegadores modernos incluyendo Chrome, Firefox, Safari, Edge y Opera. Ha sido parte de CSS3 desde 2011 y tiene excelente compatibilidad con navegadores.
¿box-shadow afecta el rendimiento?
box-shadow tiene un impacto mínimo en el rendimiento de los navegadores modernos. Sin embargo, usar múltiples sombras complejas con radio de desenfoque grande en muchos elementos puede afectar el rendimiento de renderizado, especialmente en dispositivos móviles.
¿Cuáles son los casos de uso comunes de box-shadow?
Los usos comunes incluyen crear efectos de elevación de tarjetas, añadir profundidad a botones, crear campos de formulario insertados, implementar sombras de material design y añadir separación visual entre elementos superpuestos.
¿Puedo animar box-shadow?
Sí, box-shadow puede animarse usando transiciones o animaciones CSS. Sin embargo, animar box-shadow puede ser intensivo en rendimiento. Para mejor rendimiento, considera usar pseudo-elementos con transiciones de opacidad en su lugar.
Cómo usar Generador de Box Shadow CSS
Diseña sombras CSS box-shadow visualmente en lugar de adivinar números. El generador se ejecuta localmente en tu navegador y nada de lo que introduzcas se sube.
- Ajusta H-Offset y V-Offset para mover la sombra en horizontal y en vertical.
- Aumenta Blur para suavizar los bordes y Spread para agrandar o reducir la sombra.
- Elige un Color y ajusta su Opacity para lograr un resultado más natural.
- Marca Inset para dibujar la sombra dentro del elemento en lugar de alrededor.
- Copia la regla box-shadow terminada desde la vista previa a tu hoja de estilos.
Un desenfoque pequeño con un V-Offset positivo pequeño crea una sombra de contacto sutil y realista justo debajo del elemento.
Herramientas relacionadas
- Generador de Border Radius CSS Generador visual de border-radius CSS. Ajusta cada esquina de forma independiente con vista previa en tiempo real y copia el código CSS al instante.
- Generador de Gradientes CSS Crea impresionantes gradientes CSS visualmente. Genera gradientes lineales, radiales y cónicos con múltiples paradas de color, ángulos y posiciones. Copia código CSS listo para producción.
- Generador CSS Grid Generador visual gratuito de CSS Grid con vista previa en vivo. Diseña cuadrículas responsivas interactivamente y exporta código CSS listo para producción.
- Generador CSS Flexbox Generador visual CSS Flexbox con vista previa en vivo. Ajusta propiedades flex y obtén código CSS listo para usar.
- Generador de Border Radius Creativo Generador de border radius creativo gratuito en línea. Arrastra 8 puntos o elige una forma blob para crear figuras CSS orgánicas y copiar el código al instante.
- Convertidor de Color Convertidor de color online gratuito. Convierte formatos HEX, RGB, HSL, HSV al instante con selector visual. 100% privado, funciona en tu navegador.
- Generador de Easing CSS Generador online gratuito de easing CSS. Arrastra los puntos de control de cubic-bezier en una curva interactiva, elige entre 18 presets, mira una animación de bola en bucle y copia la función de temporización al instante.
- Generador de Text Shadow CSS Generador online gratuito de text-shadow CSS. Apila varias capas de sombra con desplazamiento, desenfoque, color y opacidad, prueba presets como Neón, 3D o Retro y copia el CSS al instante.