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.

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.

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.

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.