Question 1

What are the CSS box-shadow parameters?

Accepted Answer

box-shadow: [inset] offset-x offset-y blur-radius spread-radius color. offset-x/y: shadow position. blur-radius: softness (0 = sharp). spread-radius: shadow expansion (+) or contraction (−). inset: shadow appears inside the element. Multiple shadows separated by commas are supported.

Question 2

How do I create a neumorphism (soft UI) shadow?

Accepted Answer

Neumorphism uses two shadows: one light (white or near-white) and one dark (slightly darkened background color), offset in opposite directions. Example: box-shadow: 6px 6px 12px #b8b9be, −6px −6px 12px #ffffff; on a #e0e5ec background. The element appears to protrude from the surface.

Question 3

Can I add multiple box shadows?

Accepted Answer

Yes. CSS supports multiple comma-separated shadows on a single element. Shadows are rendered front-to-back (first listed is in front). Use multiple shadows for complex effects: top highlight + bottom ambient shadow, or color gradients simulated with layered shadows.

CSS-Box-Schatten-Generator

Eingabe

Ausgabe

Häufige Fragen