Generador CSS Box Shadow

Ajusta box-shadow visualmente con sliders. Multi-capa, inset, vista previa, copiar CSS con un click.

100% Gratis Sin registro Solo navegador 5 idiomas Modo oscuro

Capas de sombra

Vista previa

Fondo Elemento Radio 12px

CSS

Preajustes

📖 Dónde se suele tropezar

Construye un box-shadow con sliders, apila capas y exporta el CSS. Todo se ejecuta en el navegador. La vista previa es tu navegador actual dibujando, así que la gradación del desenfoque puede verse algo distinta en otro navegador o sistema. Si necesitas coincidencia exacta al píxel, compruébalo en el dispositivo real.

Caso	Qué ocurre	Qué hacer
Confundir blur con spread	Blur es cuán suave queda el borde; spread escala la sombra en sí. Subir spread empuja hacia fuera una sombra todavía nítida, y el resultado se ve más pesado de lo que buscabas.	Una sombra natural suele querer bastante blur y un spread negativo. Algo como `0 4px 12px -2px rgba(0,0,0,.15)` encoge un poco la forma antes de difuminarla, y se levanta con suavidad justo bajo el elemento.
Animar un elemento con sombra va lento	Animar el propio valor de `box-shadow` obliga a recalcular el desenfoque en cada fotograma. En algo como un hover sobre una rejilla de tarjetas, eso solo ya se nota pesado.	Lleva la sombra a un pseudo-elemento `::after` y anima sólo su `opacity`. Opacity y transform se resuelven en el compositor, así que no hay layout ni repintado. Usa `will-change` sólo donde de verdad haya tirones: crea capas y consume memoria.
La sombra parece pegada encima	Una sola capa negra y densa no se comporta como una sombra real. Las sombras reales se ensanchan y aclaran con la distancia a la luz y recogen algo del color del entorno. Una capa plana hace que el elemento parezca recortado y pegado.	Apila dos o tres capas tenues. El emparejamiento clásico es una pequeña, cercana y algo más oscura (`0 1px 2px rgba(0,0,0,.10)`) con otra grande, lejana y más tenue (`0 8px 24px rgba(0,0,0,.08)`). Aleja el color del negro puro hacia el tono del fondo y encaja. Material Design y la HIG de Apple lo hacen así.

box-shadow proyecta siempre la forma de la caja del elemento, esquinas redondeadas incluidas. Con un logo PNG transparente o un icono SVG saldría una sombra rectangular, así que usa filter: drop-shadow(), que sigue el canal alfa. Eso sí, drop-shadow no tiene spread y encadenar varios multiplica el coste del filtro: elige según el caso.

📖 Cómo usar

1

Ajusta la sombra con los sliders

Modifica X / Y / blur / spread / color / opacidad
2

Añade capas

Pulsa "+ Añadir" para apilar capas. CSS se separa con comas automáticamente
3

Copia el CSS

Copia con un click el box-shadow generado

❓ Preguntas frecuentes

¿Dónde lo pego?

Dentro de cualquier selector CSS. Ej: .card { box-shadow: ... }

¿Qué es inset?

Dibuja la sombra dentro del elemento. Útil para botón presionado

¿Para qué combinar varias sombras?

Una sombra cercana suave + una más lejana crea profundidad realista (Material / Apple HIG)

🐛 ¿Encontró un problema con esta herramienta?

Gratis, sin registro. Incluso solo los pasos para reproducir ayudan. Los informes van directamente al operador y se usan para corregir.