How to Create Beautiful CSS Gradients: A Visual Guide

The Three Types of CSS Gradients

CSS supports three gradient functions, each producing a different pattern:

Linear Gradients

The most common type. Colours transition along a straight line at any angle. The syntax is linear-gradient(direction, color1 stop1, color2 stop2, ...).

The direction can be an angle (45deg, 180deg) or a keyword (to right, to bottom left). The default is to bottom (180deg).

Colour stops control where each colour sits along the gradient. Without explicit stops, colours are evenly distributed. You can also add a midpoint hint between two stops to shift the transition point.

Radial Gradients

Radial gradients radiate outward from a centre point. The shape can be a circle or ellipse, and you control the size with keywords like closest-side, farthest-corner, or explicit dimensions.

Common uses: spotlight effects, glowing buttons, circular progress indicators, and subtle background depth effects that draw the eye to the centre of a section.

Conic Gradients

Conic gradients sweep colours around a centre point, like a colour wheel. They're ideal for pie charts, colour pickers, and decorative backgrounds with a rotating colour effect.

The syntax accepts a starting angle and centre position: conic-gradient(from 90deg at 50% 50%, red, blue, red).

Practical Gradient Patterns

• Hero backgrounds: A subtle two-colour gradient (e.g. dark blue to dark purple) creates depth without distracting from text.
• Button hover effects: Shift the gradient angle or colours on hover for a dynamic, no-JS interaction.
• Text gradients: Apply a gradient to text with background-clip: text and -webkit-text-fill-color: transparent.
• Border gradients: Use border-image with a gradient source, or the mask technique for rounded corners.
• Noise overlay: Layer a gradient over a subtle SVG noise texture for a rich, organic feel.

Tips for Better Gradients

• Avoid muddy midpoints: When two complementary colours mix, the middle turns grey. Add an intermediate colour to keep the gradient vibrant.
• Use HSL for colour selection: Gradients between HSL colours with similar lightness look more natural than arbitrary hex values.
• Test on both themes: A gradient that looks great on a white background may disappear on dark mode. Always check both.
• Consider accessibility: Ensure text over gradients meets contrast requirements at every point in the gradient, not just the start and end.