What the decoration generator does
Box shadow, border and border radius are the three properties that turn a plain rectangle into a card, a button, an input or a panel — and they are fiddly to tune by hand, especially shadows with their four numbers and a colour. This generator gives you sliders for each property, a live preview on a light and a dark background, and the CSS to copy: border width, style (solid, dashed, dotted) and colour; radius per corner or all at once; and a layered shadow with offset, blur, spread and opacity. Runs in your browser.
box-shadow, explained
box-shadow: offset-x offset-y blur spread color [inset];
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* soft card lift */
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* subtle, close to surface */
box-shadow: 0 0 0 3px rgba(232, 93, 38, 0.3); /* focus ring (spread only) */
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); /* pressed / inset field */
box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.08); /* layered */| Value | What it does |
|---|---|
| offset-x / offset-y | Moves the shadow; positive y pushes it down, as if lit from above |
| blur | Softens the edge; 0 is a hard copy of the box |
| spread | Grows (positive) or shrinks (negative) the shadow before blurring |
| color | Almost always black or a dark tint at 5–25% opacity |
| inset | Draws the shadow inside the box instead of outside |
Shadows that look natural
- Light from above: y offset greater than x, usually x = 0.
- Blur ≈ 2–3× the y offset for a soft, realistic falloff:
0 4px 12px,0 8px 24px. - Low opacity, layered: two or three shadows at 5–10% each look better than one at 30%. A tight one for contact and a wide one for ambient light.
- Tint the shadow with the surface's hue rather than pure black — a navy shadow on a blue-grey page reads as more natural.
- Elevation scale: define three or four levels (2, 4, 8, 16 px) and reuse them; ad-hoc shadows make a UI look inconsistent.
- Dark mode: shadows are barely visible on dark backgrounds; raise the surface colour instead, or use a faint light border.
border-radius
border-radius: 8px; /* all corners */
border-radius: 8px 8px 0 0; /* top-left, top-right, bottom-right, bottom-left */
border-radius: 50%; /* circle on a square element */
border-radius: 9999px; /* pill */
border-radius: 20px / 10px; /* elliptical corners */Nested elements need smaller radii than their parents to look concentric: inner radius = outer radius − padding. A card with 16 px radius and 8 px padding wants 8 px on the image inside it.
Border styles
| Style | Use |
|---|---|
| solid | The default for inputs, cards and dividers; 1 px at 10–20% opacity for subtle edges |
| dashed | Drop zones, placeholders, editable regions, 'add new' cards |
| dotted | Focus indicators in some systems; decorative dividers |
| none + shadow | Modern cards often drop the border and rely on a faint shadow |
Performance notes
- Large blur radii on many elements cost paint time, particularly while scrolling. Keep blur under about 40 px and avoid shadows on hundreds of list items.
- Animating
box-shadowrepaints every frame. For hover lifts, animatetransformand crossfade a pseudo-element that carries the shadow viaopacity. filter: drop-shadow()follows the visible shape (transparent PNGs, clip-paths) but is more expensive thanbox-shadow; use it only when the shape is non-rectangular.
Frequently asked questions
Why doesn't my shadow show?
Usually a parent with overflow: hidden clipping it, or the shadow colour matching the background. Check for overflow on ancestors and increase the opacity to test.
How do I put a shadow on only one side?
Use a negative spread to pull the shadow in, then offset it toward the side you want: box-shadow: 0 8px 8px -8px rgba(0,0,0,.3) shows only at the bottom.
What is a good default card style?
background: #fff; border-radius: 12px; border: 1px solid rgba(0,0,0,.06); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.06). Adjust the accent to your palette.
Can I use multiple borders?
Not directly, but you can combine border, outline (with outline-offset) and a spread-only box-shadow to get up to three rings.
Does border-radius clip child content?
Backgrounds and borders are rounded automatically; child content is only clipped if the element also has overflow: hidden.
Are there browser prefixes needed?
No. All three properties have been unprefixed in every browser for over a decade.