CSS Gradients, Shadows and Rounded Corners: A Visual Guide

Gradients, shadows and rounded corners are three of the most-used CSS effects — and three of the fiddliest to write by hand. The syntax isn’t hard; the trouble is that you can’t picture the result from the numbers, so you end up tweaking, saving, refreshing, repeating. Here’s what each one actually does.

Gradients: linear-gradient and radial-gradient

A gradient is a smooth blend between colors, used as a background.

background: linear-gradient(90deg, #3388cc, #8833cc);
background: radial-gradient(circle, #3388cc, #8833cc);

• Linear blends along an angle: 0deg is bottom-to-top, 90deg is left-to-right, 180deg is top-to-bottom.
• Radial blends outward in a circle from the center. The angle doesn’t apply.
• You can add more color stops (#a, #b, #c) for multi-color blends.

Our CSS generator emits the angle explicitly — its default output is background: linear-gradient(90deg, #3388cc, #8833cc); rather than the shorter form without an angle. That is deliberate: linear-gradient(#3388cc, #8833cc) is legal and defaults to top-to-bottom, but a reader of your stylesheet cannot tell whether you meant it or forgot it.

Box shadow: five numbers and a color

box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.3);

In order: offset-x, offset-y, blur, spread, color.

• Offsets move the shadow — positive x/y pushes it right and down, which reads as light coming from the top-left.
• Blur softens the edge; higher is softer.
• Spread grows or shrinks the shadow before blurring.
• Add inset at the front for an inner shadow (a pressed-in look).

A subtle, believable shadow usually means small offsets, moderate blur and a low-opacity color — not solid black.

Worth comparing with what our generator actually gives you: box-shadow: 5px 5px 15px 0px #000000;. Two differences from the example above. It always writes the spread even when it is 0px, so the four lengths line up when you edit them later. And the colour comes out as a hex value, which means it is fully opaque — so the first thing to change in a real design is usually that #000000, turning it into an rgba() with low alpha. The generator gives you a correct declaration, not a tasteful one.

Border radius: one property, four corners

border-radius: 20px;                  /* all corners */
border-radius: 20px 40px 20px 40px;   /* TL TR BR BL */

One value rounds everything equally; four values set each corner clockwise from top-left. A border-radius equal to half the box’s height gives you a pill; equal to half of a square gives a circle.

Our generator always writes the long form: border-radius: 20px 20px 20px 20px; even when all four corners match. Verbose, but it means you can change one corner without first working out which shorthand position it occupies — the most common way a hand-edited border-radius goes wrong.

Build them visually

Guessing these numbers is slow. The CSS generator gives you sliders and color pickers with a live preview for all three — gradient, box-shadow and border-radius — and copies clean CSS when it looks right.

Related tools

• Need to convert a color between HEX, RGB and HSL? Use the color converter.

Copy-paste recipes

These snippets cover most everyday cases — drop them in and adjust the numbers to taste.

/* Subtle card lift */
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

/* Soft floating panel */
box-shadow: 0 10px 30px rgba(0,0,0,0.15);

/* Diagonal brand gradient */
background: linear-gradient(135deg, #6366f1, #8b5cf6);

/* Pill-shaped button */
border-radius: 9999px;

Stacking two shadows — one tight, one wider and softer — reads as more believable depth than a single large blur.

Common mistakes

• Dropping the angle unit. linear-gradient(90, …) is invalid; write 90deg, or use a keyword like to right.
• Pure black shadows. rgba(0,0,0,1) looks like a cut-out sticker. Real shadows are low-opacity and softened.
• Expecting overflow: hidden to trim a shadow. box-shadow paints outside the box and ignores the element’s own overflow.
• “Over-rounding” a corner. Any border-radius past half the shorter side simply maxes out at a full pill or circle — it can’t round further.

FAQ

Can I animate a gradient? Not the color stops themselves — CSS can’t tween background-image. Instead animate a larger background-size and shift background-position, or cross-fade two stacked layers.

Why is my shadow invisible? Almost always a zero offset with zero blur, or a fully transparent color. Give it a small offset and an alpha near 0.2.

Do these need vendor prefixes? No. linear-gradient, box-shadow and border-radius all work unprefixed in every current browser.

Once your palette is settled, keep each color consistent by reading it in one notation — see HEX, RGB and HSL explained — or lift a starting shade straight from a mockup with the image color picker.