Gradient
A smooth colour transition between two or more colours used as a background or overlay.
Plain English
Gradients add depth and energy to flat surfaces. A subtle gradient on a hero background suggests dimensionality. A gradient overlay on a photo ensures text above it stays readable regardless of the image. Used sparingly, gradients add richness; used heavily, they feel early-2000s web. The rule of thumb: if you can tell where the gradient starts and ends without squinting, it is probably too strong.
Technical
CSS provides linear-gradient() (straight-line), radial-gradient() (circular), and conic-gradient() (conical sweep). Syntax: background: linear-gradient(direction, color-stop-1, color-stop-2). Direction can be an angle (45deg) or keyword (to bottom right). Colour stops accept hex, rgba, hsl, and percentage positions. Gradients are images in CSS — they cannot be transitioned directly, but opacity of a gradient pseudo-element can be.
Live Demo
Subtle hero background
Nearly invisible — adds depth without colour
Text readability overlay
Ensures white text is readable over any photo
Mesh / brand gradient
Bold brand identity — use sparingly
Warm editorial
Luxury, editorial, or lifestyle contexts
Four gradient use cases — from nearly invisible to bold brand statement.
Usage
✓ Good usage
Place a linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 70%) overlay on hero photos to ensure white text is always readable regardless of the image.
✗ Bad usage
A bright multi-colour gradient (purple to orange) as the primary background — the eye has nowhere to rest and all content competes with the background.
Recommended values
- Subtle hero background: linear-gradient(135deg, #EFF6FF 0%, #F8FAFC 100%)
- Text readability overlay on photo: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%)
- Mesh/noise gradient: multiple radial-gradients layered for modern look
- Glass highlight: linear-gradient(to bottom, rgba(255,255,255,0.1) 0%, transparent 100%)
- Avoid: rainbow gradients, gradients with more than 3 stops (rarely needed)
Common mistakes
- Too-obvious gradients — gradients should add depth, not scream "I used a gradient".
- Not checking text contrast over gradients — the lightest part of the gradient may fail contrast.
- Animating background-image (gradients) — use opacity transitions on a pseudo-element instead.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Use a subtle linear-gradient(135deg, #EFF6FF, #F8FAFC) for the hero section background. On images with text overlay, apply linear-gradient(to top, rgba(0,0,0,0.65), transparent) to ensure readability. Keep gradients gentle — barely perceptible.