Generador de box-shadow CSS
Arrastra los controles o elige un preajuste — mira la sombra en una tarjeta en vivo y copia el CSS box-shadow con un clic.
Preajustes
Capas
0px
8px
24px
-8px
#000000
15%
Cómo se usa
- La tarjeta ya tiene una sombra suave — arrastra cualquier control (desplazamiento X/Y, desenfoque, expansión), elige un color y una opacidad, o marca Inset para una sombra interior. Todo se actualiza en vivo, sin pulsar ningún botón.
- Haz clic en un preajuste (Flotación suave, Elevación marcada, Interior, Brillo neón, Doble, Neumorfismo) para cargar al instante un aspecto ya hecho.
- Añade más capas con «+» para apilar sombras; cada capa se edita por separado. Copia la declaración box-shadow completa con un clic.
Ejemplo
Preajuste
Flotación suave
CSS box-shadow
box-shadow: 0px 8px 24px -8px rgba(0, 0, 0, 0.15);
Cópialo directamente en cualquier selector, p. ej., .card { box-shadow: 0px 8px 24px -8px rgba(0, 0, 0, 0.15); }. El preajuste «Doble» genera dos sombras separadas por comas; «Neumorfismo» necesita un fondo claro para verse.
Alcance, límites y preguntas habituales
- Solo box-shadow: sin el filtro drop-shadow(), sin text-shadow, y CSS no tiene sombras con degradado — eso queda fuera de alcance.
- El color viene del selector más un control de opacidad; no analizamos cadenas de color CSS pegadas, así que no hay nada que escribir mal ni malinterpretar.
- El neumorfismo depende de una superficie clara — sobre fondos muy oscuros su efecto puede ser invisible. Eso es una propiedad del estilo, no un error.
- No se guarda ni comparte nada con un parámetro en el enlace: recarga y vuelves al preajuste Flotación suave predeterminado. Todo se ejecuta en tu navegador.
Herramientas relacionadas
Cuando necesitas ir más lejos con el color o las sombras.