CSS Gradients, Shadows and Border Radius, Explained

After reading this you will know exactly what each number in a gradient, box-shadow or border-radius does, why layered shadows look real while single blurs look flat, and how to write these values by hand when you need to.

What these three properties actually control

Three CSS features cover most of the visual polish you add to a plain box: background gradients, box-shadow, and border-radius. All three take a small list of numbers with strict meanings. Once you know what each number does, the generator becomes a way to preview values you already understand, not a black box.

Here is one hook example. This single declaration paints a diagonal blend from teal to purple:

The angle 135^\circ points the gradient down and to the right. The two color stops sit at 0% and 100% of that line. Every gradient, no matter how many colors, is just an angle (or a shape) plus a list of stops with positions.

When to reach for each, and when not to

Use a gradient when you want a smooth color transition inside one element: a button, a hero banner, a progress bar. Do not use a gradient to fake a photographic image; that is what real images are for, and a 12-stop gradient is both hard to maintain and easy to get wrong.

Use box-shadow to show depth or focus: a card lifted off the page, a dropdown floating above content, a ring around a focused input. Do not use a single huge blur to imply "elevated"; that reads as a gray smudge. The realistic look comes from stacking.

Use border-radius to round corners. One value rounds all four the same. Four values round each corner independently. Do not set a radius larger than half the shorter side unless you actually want a pill or a circle, because the browser clamps it there anyway.

The gradient line and how stops map onto it

A linear gradient draws along a line through the box. For an angle \theta, 0deg points up, 90deg points right, and the angle increases clockwise. The gradient line runs across the box so that its full length spans from one corner region to the opposite one, and each color stop names a position along that line as a percentage.

Here p is a position from 0% to 100% along the line, c_i and s_i are the color and position of stop i, and lerp is linear interpolation in the chosen color space. Between two stops the color blends; before the first stop and after the last, the color holds flat. Radial gradients replace the line with a distance from a center point, and conic gradients replace it with an angle sweeping around a center.

A worked gradient from the demo defaults

Why layered shadows look real

A box-shadow takes up to four lengths: horizontal offset, vertical offset, blur radius, and spread radius, followed by a color. A real object casts light that falls off gradually, so its shadow is dense and small near the object and faint and wide far away. A single shadow cannot show both at once.

This says the visible opacity at distance d from the box is what you get by stacking n semi-transparent shadow layers, each with its own falloff \alpha_j(d). Near the box, several tight layers overlap and add up. Far away, only the widest, faintest layer remains. The trick is to increase blur and decrease opacity together across layers.

Reading border-radius values correctly

The shorthand border-radius accepts one to four values, and they map to corners clockwise starting top-left: top-left, top-right, bottom-right, bottom-left. So border-radius: 8px 20px 8px 20px rounds top-left and bottom-right by 8px and the other two by 20px.

Each corner is an ellipse quarter, not always a circle. A slash gives the horizontal and vertical radii separately: border-radius: 40px / 20px makes every corner an ellipse 40px wide and 20px tall. The browser also enforces a limit: if the sum of two radii on one edge exceeds that edge's length, all radii scale down by the same factor so they fit. That is why a 100px radius on a 60px-tall button becomes exactly 30px, half the height, producing a pill.

Common mistakes

Confusing gradient angle direction. CSS 0deg points up and increases clockwise. Many people expect 0deg to point right, as in math. Check: 90deg should flow left to right.

Relying on default color positions. If you omit stop positions, the browser spaces stops evenly. Four colors land at 0%, 33.3%, 66.7% and 100%. If you want a hard color band, set two stops to the same position, for example red 50%, blue 50%.

Spread on the wrong sign. A negative spread shrinks the shadow, useful for a shadow that peeks out only on one side. A positive spread grows it in every direction before blur applies, which can leak past rounded corners.

Forgetting inset. Adding the inset keyword draws the shadow inside the box, which is how you carve a pressed-button or inner-glow effect. Without it the shadow sits outside.

Related tools

These pages pair well with visual CSS work. Convert and contrast-check your gradient colors with the Color Converter & Contrast Checker before you commit them. When you build a demo page and inspect its assets, the MIME Type Lookup confirms how images and fonts are served, and the User-Agent Parser helps you reason about which browsers your visitors run.

Related tools

Color Converter & Contrast Checker

HEX ↔ RGB ↔ HSL ↔ OKLCH, plus WCAG contrast ratios.

URL Parser & Query Editor

Split a URL into parts and edit query parameters in a table.

curl Converter

Turn a curl command into fetch, axios, Python or PowerShell.

HTTP Status Codes

Search by code, phrase, or symptom — with retry/cache badges, causes, fixes, and RFC links.

Keycode Inspector

Press any key, see event.key, event.code and modifiers.

User-Agent Parser

Decode any user-agent string: browser, engine, OS, device.