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

Gerador de Sombra de Caixa 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

Guia Completo de CSS Box Shadow

A propriedade CSS box-shadow adiciona um ou mais efeitos de sombra ao redor do quadro de um elemento.

Sintaxe

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

Perguntas Frequentes

Posso adicionar múltiplas sombras?

Sim. CSS box-shadow aceita uma lista separada por vírgulas.

O box-shadow afeta o layout?

Não. box-shadow não afeta o tamanho ou posição dos elementos ao redor.

Tool last updated: May 2026