CSS Gradients, Shadows and Border Radius, Explained

Three CSS properties do a lot of the work in modern interface design: gradients for backgrounds, shadows for depth, and rounded corners for softness. Each has a small syntax that is easy to forget and annoying to tune by editing numbers blind.

This guide explains what each value does, gives sensible starting points, and shows how the free generators on this site speed up the trial and error. They preview as you drag and give you a line of CSS to paste.

CSS gradients

A gradient is an image the browser generates, so you use it anywhere an image goes, usually in background or background-image. The two you need most are linear and radial.

Linear gradients

The syntax is linear-gradient(angle, colour1, colour2). The angle sets the direction of the colour change:

• 0deg runs bottom to top.
• 90deg runs left to right.
• 180deg runs top to bottom.
• 270deg runs right to left.

So background: linear-gradient(90deg, #4f46e5, #ec4899); blends from indigo on the left to pink on the right. Angles in between give diagonals, with 135deg a popular top-left to bottom-right choice.

Radial gradients

radial-gradient(circle, colour1, colour2) starts at the centre with colour 1 and spreads outward to colour 2. It suits spotlight effects, soft button highlights and glowing backgrounds.

Colour stops

You can add more colours and set where each one sits: linear-gradient(90deg, #4f46e5 0%, #ec4899 60%, #f59e0b 100%). Place two stops at the same percentage for a hard edge instead of a blend.

How to build a gradient with the generator

1. Open the CSS Gradient Generator.
2. Choose linear or radial.
3. For linear, drag the Angle slider (it shows the degrees).
4. Set Color A and Color B with the colour pickers.
5. Watch the preview, then click Copy to get a complete background: ...; line.

The tool covers two colours. For extra stops, paste the line into your stylesheet and extend it. If you need help choosing colours, the Color Tool converts between formats and checks contrast.

Box shadows

The property takes up to five values plus an optional keyword: box-shadow: inset? x y blur spread colour;

• x moves the shadow right (positive) or left (negative).
• y moves it down (positive) or up (negative).
• blur softens the edge. Zero gives a hard edge. It cannot be negative.
• spread grows (positive) or shrinks (negative) the shadow before blur.
• colour is best given as a semi-transparent value like rgba(0, 0, 0, 0.25).
• inset draws the shadow inside the box, useful for pressed or recessed looks.

The generator opens with 0px 10px 20px -5px rgba(0, 0, 0, 0.25). A negative spread tucks the shadow in so it appears mainly beneath the element, a more natural look than a halo all around.

How to design a shadow with the generator

1. Open the CSS Box Shadow Generator.
2. Adjust Offset X, Offset Y, Blur and Spread with the sliders.
3. Choose a colour and set Opacity; the tool converts it to an rgba() value.
4. Tick Inset if you want an inner shadow.
5. Click Copy to get box-shadow: ...;.

Rules of thumb for realistic shadows: keep opacity low (0.1 to 0.3), push the shadow down rather than sideways because light usually comes from above, and make bigger elements cast larger, softer shadows. Cards that float higher get a larger Y offset and blur.

To layer shadows, separate them by commas, for example a tight dark one plus a wide soft one. The generator makes one at a time, so copy each and join them yourself.

Border radius

border-radius rounds corners. Values run clockwise from the top-left: top-left, top-right, bottom-right, bottom-left.

• One value, 8px, applies to all four corners.
• Two values, 8px 24px, set top-left and bottom-right to 8px, and top-right and bottom-left to 24px.
• Four values set each corner on its own.

Percentages are relative to the element's size. 50% on a square makes a circle, and on a rectangle makes an ellipse. For a pill-shaped button whatever its height, use a large pixel value like 9999px.

How to round corners with the generator

1. Open the CSS Border Radius Generator.
2. Move the Top-left, Top-right, Bottom-right and Bottom-left sliders in pixels.
3. Check the preview shape.
4. Click Copy for border-radius: 16px 16px 16px 16px;. The tool always writes all four values, which you can shorten to one by hand when they match.

It works in pixels only and does not generate the elliptical form with a slash, such as 50% / 20%.

Where current tools fall short

Many CSS generator sites are slow, ad-heavy or tangled with sign-up prompts. Some output vendor prefixes that modern browsers no longer need, and others bundle every property into one cluttered panel. A few only produce code in a framework syntax you may not use.

These three tools are simple by design. They produce plain CSS, one property each, with no framework syntax. The limits are the ones already noted: two gradient colours, one shadow and pixel-only radii.

Everyday use cases

• Hero section background. A soft diagonal gradient behind a headline.
• Cards. A gentle shadow and 12px radius to lift content from the page.
• Buttons. A pill radius with a subtle inset shadow on press.
• Avatars. Equal width and height with a 50% radius for round profile photos.
• Prototypes. Preview and copy a style before committing it to a stylesheet.

Putting the three together

The properties combine well. A typical card component uses all three in a few lines:

background: linear-gradient(135deg, #4f46e5, #ec4899); for the fill, border-radius: 16px; for soft corners and box-shadow: 0px 10px 20px -5px rgba(0, 0, 0, 0.25); for depth. Generate each line with its tool, paste them into one rule, and adjust by eye.

A few judgement calls make results look professional rather than default. Use gradients between neighbouring hues, such as blue to purple, because gradients between opposites like red and green pass through a muddy middle. Keep your shadow colour tinted slightly toward your background colour rather than pure black if your design has a strong hue. Let the radius follow the size of the element: 6 to 8px for inputs, 12 to 16px for cards, larger values for big hero panels.

Consistency matters more than any single value. Pick a small scale, for example radii of 6, 12 and 24, and shadows at two or three elevations, and reuse them. In a stylesheet you can store them as CSS custom properties so you can change a look in one place.

Finally, test dark mode. A shadow that looks soft on white often disappears on a dark background, so you may want a stronger opacity or a lighter border instead.

Tips and mistakes to avoid

• Check text contrast on gradients. Test your text colour against both ends of the gradient; see WCAG colour contrast explained.
• Avoid harsh shadows. High-opacity black looks dated; use low opacity.
• Keep radii consistent. Choose two or three values for your whole interface.
• Remember shadows do not change layout. They draw outside the box and can be clipped by a parent with hidden overflow.
• Provide a fallback colour. Set a solid background-color before the gradient for older browsers.
• Use rgba for shadows, not solid hex, so the shadow blends with whatever is behind it.

Related reading

Other front-end posts include WCAG colour contrast explained and how to test a regex. For related assets, see resizing images without losing quality. All the front-end helpers are listed under developer tools.