CSS gradients give backgrounds depth and movement without an image file — pure code that scales, recolours, and renders cleanly on every screen. Linear gradients sweep across a surface; radial gradients bloom from a point; conic gradients sweep around an angle. A gradient generator handles the syntax so the design choice — colours, direction, stops — translates directly into copyable CSS.

This guide covers the gradient types, common patterns, and the practical points that make gradients look professional rather than dated.

Gradient Types

Linear Gradient

Colours flow in a straight line. Direction in degrees (0deg = bottom to top, 90deg = left to right) or keywords (to right, to bottom right).

background: linear-gradient(135deg, #667eea, #764ba2);

Radial Gradient

Colours emanate from a centre point. Shape (circle or ellipse), size, position configurable.

background: radial-gradient(circle at top right, #ff9966, #ff5e62);

Conic Gradient

Colours sweep around a centre point at angles. Useful for pie charts, colour wheels, decorative effects.

background: conic-gradient(from 0deg, red, yellow, green, blue, red);

Colour Stops

  • Default: colours evenly distributed
  • Custom: specify position (0%, 50%, 100%)
  • Hard stops: two colours at same position create sharp boundary
  • Multiple stops: complex gradients with many colours

Common Gradient Patterns

Subtle Background

Two close colours, small angle. Adds depth without distraction.

Bold Hero

Vibrant complementary colours, 45-135deg diagonal. Eye-catching, modern.

Glassmorphism

Semi-transparent gradient over background. Blur effect via backdrop-filter.

Mesh Gradient

Multiple radial gradients overlapping. Organic, painterly effect.

Stripes

Hard stops creating banded pattern. Background-size controls stripe width.

Direction Reference

  • 0deg / to top — bottom to top
  • 90deg / to right — left to right
  • 180deg / to bottom — top to bottom
  • 270deg / to left — right to left
  • 45deg / to top right — diagonal

Colour Choice for Gradients

  • Analogous — Adjacent on colour wheel; smooth, harmonious
  • Complementary — Opposite on wheel; vibrant, high contrast
  • Monochromatic — Same hue, different lightness; subtle, elegant
  • Triadic — Three evenly spaced colours; bold, playful

Common Pitfalls

  • Muddy middle. Complementary colours sometimes blend through grey
  • Too many colours. Distracting; loses elegance
  • Wrong contrast for text. Text on gradient may be unreadable at one end
  • Banding on similar colours. 8-bit colour limits cause visible bands; dither or use SVG
  • Mobile performance. Animated gradients can lag on low-end devices
  • Dated palette. Some colour combinations feel locked to a specific era

Performance

  • Gradients are GPU-rendered; better performance than image backgrounds
  • Avoid animating gradient stops; animate transform or opacity instead
  • Test on real mobile devices, not just desktop simulation

Accessibility

  • Text over gradient needs contrast at every point
  • Use overlay (semi-transparent layer) if base gradient is too varied
  • Avoid gradients as sole indicator of meaning
  • Reduce motion media query — disable animated gradients when user preference set

Quick Tips

  • Two-colour gradients work most often
  • Diagonal (45 or 135deg) feels more modern than horizontal/vertical
  • Check text contrast over every part of the gradient
  • Use CSS variables for gradient colours to allow theming
  • Save successful gradients to brand documentation

Use the CSS Gradient Generator on Popupnote

The CSS Gradient Generator on Popupnote provides a clean tool for designing linear, radial, and conic gradients with live preview and copyable CSS — for frontend developers, designers, and anyone styling backgrounds. The tool runs in your browser without any account required.