How do I create a neumorphism shadow in CSS?

Stack two shadows with opposite directions — one dark below-right, one light above-left, both on a background that matches the element. Example: box-shadow: 8px 8px 16px #b8b9be, -8px -8px 16px #ffffff. The element should share the same background color as its parent for the soft, embedded look.

What's the difference between inset and outset box-shadow?

Default (outset) shadows project outward from the element's edge. Adding the inset keyword flips the shadow inward, making the element appear pressed in or recessed. Inset shadows are useful for input field focus rings, pressed button states and recessed UI panels.

How do I make a soft drop shadow?

Use a small Y offset, a large blur radius, and low opacity: box-shadow: 0 8px 24px rgba(0,0,0,0.08). The key is high blur with low opacity. Stack a second tighter shadow for added depth.

Can I animate box-shadow?

Yes, but it's expensive — animating box-shadow forces a repaint every frame. For smooth performance, animate the opacity of a pseudo-element with the shadow on it, or use transform: scale() to fake elevation changes.

box-shadow vs filter: drop-shadow — which should I use?

Use box-shadow for rectangular UI elements (cards, buttons, panels) — it's faster and respects border-radius. Use filter: drop-shadow() for irregular shapes — it follows transparent areas in PNGs and clip-path edges, which box-shadow can't do.

How do I add multiple shadows to one element?

Comma-separate them in a single box-shadow declaration. Each shadow renders top-down — the first shadow listed appears on top. Layering 2-4 shadows produces realistic depth.

CSSTools.io

Generador de Sombra de Caja CSS

Shadow Layers

Layer Settings

X Offset 0px

Y Offset 10px

Blur 30px

Spread 0px

Opacity 30%

Shadow Color

Inset Shadow

Card Color

Preview

Box Shadow Preview

Generated CSS

Guía Completa de CSS Box Shadow

La propiedad CSS box-shadow añade uno o más efectos de sombra alrededor del marco de un elemento. Se pueden apilar múltiples sombras separadas por comas para efectos de profundidad y neumorfismo.

Sintaxis

box-shadow: offsetX offsetY blur spread color;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2);

Sistema de Elevación

--shadow-1: 0 1px 3px rgba(0,0,0,0.10);
--shadow-2: 0 4px 6px rgba(0,0,0,0.07);
--shadow-3: 0 10px 15px rgba(0,0,0,0.10);

Preguntas Frecuentes

¿Puedo añadir múltiples sombras?

Sí. CSS box-shadow acepta una lista separada por comas.

¿Cuál es la diferencia entre box-shadow y drop-shadow?

box-shadow envuelve el cuadro rectangular. filter: drop-shadow() sigue los píxeles visibles reales.

¿Afecta box-shadow al layout?

No. box-shadow no afecta el tamaño o posición de los elementos circundantes.

Tool last updated: May 2026