Como usar: Box Shadow Generator
- Choose Box shadow or Text shadow, then start from a preset such as Layered (realistic) or Neumorphism.
- Select a layer and adjust X/Y offset, blur, spread, color, opacity and inset with the sliders or number fields.
- Add, duplicate or delete layers — stacking several soft shadows gives the most natural depth.
- Change the preview background, card color and radius to match your design, then click Copy CSS.
What is the CSS box-shadow property?
box-shadow draws one or more shadows around (or inside) an element’s border box. Each shadow is written as [inset] <x> <y> [blur] [spread] <color>, and multiple shadows are separated by commas — the first one is painted on top. Shadows follow border-radius, don’t affect layout and don’t trigger scrollbars.
| Value | What it does |
|---|---|
| X / Y offset | Moves the shadow right/down (negative values go left/up). |
| Blur | Softens the edge; 0 gives a hard shadow. Can’t be negative. |
| Spread | Grows (positive) or shrinks (negative) the shadow before blurring. |
| Color | Usually a dark color at low opacity, e.g. rgba(15, 23, 42, 0.08). |
| inset | Draws the shadow inside the box — for pressed buttons and wells. |
Realistic, layered shadows
Real objects cast a crisp contact shadow plus a wide, soft ambient one. A single large shadow looks flat; several layers with doubling offsets and blur (1px, 2px, 4px, 8px, 16px…) and low opacity look natural — try the Layered preset. A negative spread on a big blurred layer (Elevated card) keeps the shadow under the card instead of leaking out the sides. Tint the shadow color towards your background hue instead of pure black for a cleaner result.
Neumorphism, glows and focus rings
Neumorphism pairs a light shadow (top-left) and a dark shadow (bottom-right) on an element the same color as its background. It looks soft but has very low contrast, so don’t rely on it alone to show buttons or state. A shadow with zero blur and a positive spread is a great focus ring that follows border-radius: 0 0 0 2px #fff, 0 0 0 4px #4f46e5.
text-shadow
text-shadow uses the same syntax minus spread and inset. Use it subtly for legibility on images, or stack layers for neon, outline and retro 3D effects (see the Text shadow presets). Keep body text shadow-free; it reduces sharpness.
Performance and Webflow tips
Large blurred shadows are cheap to show but expensive to animate. Instead of transitioning box-shadow on hover, put the hover shadow on a ::after pseudo-element and fade its opacity. In Webflow, add each layer in the Style panel under Effects → Box shadows (choose Outside or Inside) — the table under the CSS output lists the per-layer values, with spread labeled Size as in Webflow. Pair shadows with a background from the CSS Gradient Generator.
Também pesquisado como: box shadow, css shadow, text-shadow, drop shadow, neumorphism, layered shadow, inset shadow, elevation.
Ferramentas que combinam com: Box Shadow Generator
- CSS Button Generator — Design a button that looks great in every state.
- Color Converter — Paste any CSS color — HEX, rgb(), hsl(), hwb(), oklch() or a name like tomato — and get every other format instantly, plus a ready-to-use 50–950 palette.
- Calculadora de braçadeiras — Digite um tamanho mínimo e máximo e o intervalo da janela de visualização — obtenha um valor fácil de ajustar com o zoom clamp() com explicações matemáticas, uma pré-visualização em tempo real e uma escala completa e fluida de fonte ou espaçamento.
- CSS Minifier — Paste a stylesheet to shrink it instantly.
Perguntas frequentes
What is the difference between blur and spread in box-shadow?
How do I add a shadow on only one side?
0 8px 6px -6px rgba(0,0,0,.3) for a bottom-only shadow.Is box-shadow or filter: drop-shadow() better?
box-shadow follows the element’s box and radius and supports spread and inset. filter: drop-shadow() follows the actual visible shape, including transparent PNGs and SVGs, but has no spread or inset and can be heavier to render.