Design tool
Box Shadow Generator
Combine offset, blur, spread, color, and opacity to create and preview CSS box shadows.
CSS box-shadow
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.2);
How shadow parameters create depth and emphasis
Box shadows combine six independent parameters to simulate light and depth. The horizontal offset (X) shifts the shadow left (negative) or right (positive) in pixels, while the vertical offset (Y) shifts it up (negative) or down (positive). Blur radius (minimum 0) spreads the shadow's edges; a value of 0 creates a sharp shadow, while larger values like 24 or 40 produce soft, diffused halos. Spread radius (any value, including negative) expands or shrinks the shadow outline before the blur is applied; spreading creates a larger initial silhouette, while negative spread tightens the shadow toward the element's edges. The color input accepts HEX format; the opacity field (0–1) controls transparency, with 0.2 meaning 20% opaque and 0.8 meaning 80% opaque.
The inset checkbox reverses the shadow direction, placing it inside the element's border instead of outside. Inset shadows suit button pressed states, card recessions, and internal depth effects. A live preview renders the shadow on a white card, showing real-time changes as you adjust parameters. The CSS output displays the complete box-shadow declaration with pixel-suffixed lengths and an rgba() color value. The copy button captures the entire declaration, ready to paste into a CSS rule.
Building a soft drop shadow with default parameters
The default input values demonstrate a common soft drop shadow: zero horizontal offset (shadow directly below), 8 pixels vertical offset (visible downward displacement), 24-pixel blur radius (broad softness), zero spread radius (no expansion), and black (#000000) at 0.2 opacity (20% visible). These parameters approximate light falling from slightly above and behind the element, casting a soft shadow downward. The conversion from HEX to RGB yields rgb(0, 0, 0) for black. The opacity value 0.2 is preserved exactly in the rgba() output.
When the browser renders this shadow, it first computes an 8-pixel downward offset, then applies a 24-pixel blur kernel to soften the edges. The 20% opacity ensures the shadow does not overwhelm underlying content or create harsh contrast against lighter backgrounds. Zero spread means the shadow outline starts at the element's edge (border-box by default) rather than expanding or contracting first. This combination produces a subtle depth cue, common in modern interface design.
Shadow variations for interface states and layers
Subtle shadows (blur 2–8 pixels, opacity 0.1–0.15) provide minimal elevation cues for flat designs or light layering. They work well for dividing sections without obvious depth. Standard shadows (blur 12–20 pixels, opacity 0.15–0.25) suit cards, popovers, and modals, signaling clear separation from the background. Strong shadows (blur 24–40 pixels, opacity 0.2–0.35) emphasize floating elements like dialogs or top-layer navigation. Increasing Y-offset without blur creates sharp, defined shadows for geometric or bold aesthetic styles; decreasing Y-offset and increasing blur creates ambient shadows that diffuse light evenly, suited to softer or more minimal designs.
Negative spread values tighten shadows toward the element, useful for pressed button states or inset card effects. Positive spread enlarges the shadow outline before blur is applied, exaggerating the element's silhouette. Inset shadows reversed (inset checkbox enabled) place the shadow inside the border, creating recessed or engraved appearances. Multiple box-shadow values (comma-separated) layer shadows with different offsets, blurs, and colors; manually edit the CSS after copying to experiment with layered effects.
Common shadow presets and their use cases
- Subtle elevation: box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05); produces barely-visible depth for slightly raised elements in minimalist interfaces.
- Card shadow: box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); standard shadow for cards, lists, and compact components requiring clear separation.
- Modal shadow: box-shadow: 0px 20px 60px rgba(0, 0, 0, 0.3); prominent shadow for dialogs, modals, and top-layer overlays demanding strong visual hierarchy.
- Pressed button: box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.2); inset shadow simulating a depressed surface, common for button active states.
- Glow effect: box-shadow: 0px 0px 20px rgba(255, 100, 0, 0.5); zero offset with large blur and colored opacity creates a halo or glow, suitable for highlights or attention-grabbing elements.
Frequently asked questions
What do the pixel values in the output represent?
Each pixel value corresponds to one parameter: the first is horizontal offset, the second is vertical offset, the third is blur radius, and the fourth is spread radius. All are in pixels. The rgba() value specifies the color channel values (0–255) and opacity (0–1).
Can negative offsets point the shadow upward or leftward?
Yes. Negative X-offset moves the shadow left; negative Y-offset moves it up. A shadow with X=−5 and Y=−10 appears above and to the left of the element, creating an effect of light from the lower-right.
What's the difference between blur radius and spread radius?
Blur radius controls edge softness, spreading the shadow gradient outward. Spread radius expands or shrinks the shadow's starting outline before blur is applied. A blur of 10 and spread of 0 produces a soft, defined edge; a blur of 10 and spread of 5 produces a larger, equally soft shadow.
Why is the color in rgba() format instead of HEX?
The rgba() function accepts red, green, and blue channel values (0–255) plus an alpha (opacity) value (0–1). HEX notation does not include opacity directly, so the generator converts the HEX color to its rgb() components and appends the opacity to create rgba().
Can I add multiple box shadows to the same element?
Yes. In CSS, separate multiple box-shadow values with commas: box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2), 0px 10px 20px rgba(0, 0, 0, 0.15);. This generator outputs one shadow at a time; copy multiple outputs and combine them manually.
Does an inset shadow change how the values are interpreted?
The inset keyword reverses the shadow to appear inside the element rather than outside. All offset, blur, and spread values work identically; only the direction relative to the element changes. An inset shadow with Y=8 appears 8 pixels down from the element's top edge, inside its border.