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.