Apila capas de sombra con desplazamiento, desenfoque, expansión, color e inset, previsualiza en claro u oscuro y copia el CSS.
Las sombras se generan localmente en tu navegador. Nada sale de tu dispositivo.
Un valor de box-shadow tiene cinco partes en orden fijo: offset-x (desplazamiento horizontal, positivo va a la derecha), offset-y (positivo va hacia abajo), radio de desenfoque (cuánto se embatea el borde; 0 da una silueta dura), expansión (encoge o agranda la sombra antes de desenfocarla —negativa la mete, positiva la infla) y el color, construido aquí con tu tono más un control de opacidad que acaba en el alfa de rgba(). La palabra clave inset invierte todo para pintarlo dentro del border-box en lugar de detrás.
Para un anillo de 1px que no debe cambiar el tamaño de la caja, gana el truco de la sombra: inset 0 0 0 1px pinta el contorno dentro del border-box sin impacto en el flujo, así que padding, ancho y border-radius quedan exactamente como los diseñaste. Un borde real se suma a la caja (incluso con border-box come espacio de contenido) y desplaza lo interno según su grosor. Las sombras además siguen a transform y zoom sin reflujo.
No — box-shadow siempre sombrea el rectángulo border-box, nunca la silueta alfa de la imagen, así que un recorte obtiene un cuadrado sombreado detrás. La propiedad hermana para ese trabajo es filter: drop-shadow(8px 8px 6px rgba(0,0,0,0.4)), que sigue los píxeles visibles de imágenes y SVG. No acepta spread y siempre queda detrás del elemento, pero para pegatinas y logos es la herramienta correcta.
text-shadow pinta copias de las formas de los glifos, no de una caja: acepta offset-x, offset-y y desenfoque pero no tiene palabra clave spread, y puede apilarse por comas para brillos como 0 0 8px. Sigue al texto mismo —incluido ::first-line y ::first-letter—, por eso el CSS que genera esta herramienta no tocará ninguna sombra de texto que ya tengas.
Animar box-shadow directamente fuerza un repintado cada fotograma: los hovers de unos pocos elementos están bien, pero listas largas de sombras animadas pueden perder frames en hardware flojo. La optimización clásica es un pseudo-elemento con la sombra final, transicionado con opacity, que el navegador suele poder composificar. Importa más el número de capas desenfocadas que la distancia: tres capas suaves apiladas cuestan menos que una sombra que interpolas cada frame.
No. Cada sombra se calcula en tu navegador desde el estado de los controles y se entrega a tu portapapeles como CSS puro. No hay cuenta, ni almacenamiento, ni petición de red, y la página sigue funcionando sin conexión.
Si acabas de usar Generador Box Shadow, los siguientes pasos naturales son Generador Border Radius, Convertidor de colores, Convertidor HEX a RGB, o explora todas las herramientas de Herramientas diarias.