CSS box shadow fundamentals
The CSS box-shadow property applies one or more shadow effects to an element. The syntax is: box-shadow: offset-x offset-y blur-radius spread-radius colour. Offset-x moves the shadow horizontally (positive = right, negative = left). Offset-y moves it vertically (positive = down, negative = up). Blur-radius controls how soft the shadow edge is (0 = sharp, higher = softer). Spread-radius expands or contracts the shadow size (positive = larger than element, negative = smaller).
The visual generator approach
The sliders control each property in real time with the preview updating instantly. This is far more intuitive than adjusting numbers in a CSS file, reloading, adjusting again. Find the shadow you want visually, then copy the single line of CSS. Designing shadows visually takes seconds instead of minutes of iterative editing.
Layering multiple shadows
One of the most powerful features is layering multiple shadows. CSS box-shadow accepts a comma-separated list: box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24). This two-shadow technique — one soft large shadow and one tight dark shadow — is used in Google Material Design to create realistic depth. The generator lets you add multiple shadow layers and fine-tune each independently.
Inset shadows
Adding the inset keyword makes the shadow appear inside the element rather than outside: box-shadow: inset 0 2px 4px rgba(0,0,0,0.1). Inset shadows create a pressed-in or recessed look — useful for input fields (making them look like they go into the page), toggle buttons in the "on" state, and wells or containers that should appear sunken.
Shadow design philosophy
The most realistic and elegant shadows have three characteristics: they are dark (near-black, never coloured), semi-transparent (using rgba with low alpha values like 0.08–0.25), and soft (blur radius 3–20px for UI elements). Avoid opaque grey shadows — they look like 1990s web design. The combination of a very subtle ambient shadow (large blur, low opacity) with a tighter shadow (small blur, slightly higher opacity) creates the most convincing depth.
Elevation systems in design
Design systems like Material Design define elevation levels (0–24) each with a specific shadow recipe. A card at elevation 1 has a barely visible shadow. A modal dialog at elevation 16 has a dramatic shadow that pushes it visually to the top. The generator's presets cover these common elevation levels so you can pick the right visual weight without custom design work.