Gradients: from flat to depth, without the kitsch
A gradient is a transition. From one color to another. From light to dark. From here to there.
Used with care it adds depth and light.
Used without thought it looks like a screensaver from 2003.
✦ Three kinds of gradients
- Linear. Moves in a straight line, at any angle. The most common. Good for backgrounds and buttons.
- Radial. Spreads from a center point. Feels like light falling on a surface.
- Conic. Turns around a center, like a color wheel. Useful for charts and playful details.
✦ How to use this generator
- Choose linear or radial. Or start from a preset, like Soft Ash or Peach Glow.
- Pick two colors. Start with two. Add a third only if you need it.
- Turn the angle slider. See how the direction changes the mood.
- Copy the CSS and paste it into your stylesheet.
- Test it behind real content. Text, buttons, images.
✦ The quiet gradient
The most useful gradients are almost invisible.
Two colors that are close together. A light blue to a slightly lighter blue. A warm white to a cool white.
People do not notice the gradient. They notice that the page feels alive.
✦ Watch the middle
Between two colors there is always a middle. Sometimes that middle is muddy.
Blue to yellow can pass through a dull gray-green. Red to green turns brown.
The fix: add a stop in the middle yourself. Or choose colors that sit closer together on the color wheel.
Modern browsers can also mix in other color spaces, such as linear-gradient(in oklch, …). That often gives a cleaner, brighter middle.
✦ Common mistakes
- Too many colors. Three is already a lot.
- Gradients on every element. Choose one place.
- Text on a gradient without checking the contrast at both ends.
- Visible banding: stripes in smooth transitions. A small amount of noise or closer colors helps.
✦ Try this
Make a gradient you like. Now halve the difference between the two colors.
Is it still enough? Usually it is. Usually it is better.
✦ In practice
A hero section for a website. A soft linear gradient from warm white to a pale peach, from top to bottom.
Hardly visible. But the page no longer feels like a blank document. The headline sits on light, not on nothing.
A call-to-action button. A slight gradient from your brand color to a version that is a little lighter. Direction: top to bottom.
The button looks pressable, like a small object. Keep the text color checked at both ends.
A background for a music event page. Here you can be loud. A radial gradient in two saturated colors, with a dark edge.
Loud works when it is the only loud thing. Keep the text and buttons simple on top of it.
✦ Four questions before you use it
- What do you want to say? Light, depth, movement or mood. Choose one.
- What must be seen first? The content on top. Never the gradient itself.
- What can go? The third color, the extra stop, the second gradient on the page.
- What is the next small step? Try the gradient behind your real headline, not an empty box.
✦ A small checklist
- Two or three colors at most.
- No muddy middle between the colors.
- Text contrast checked at the lightest and darkest point.
- Used in one or two places, not on every element.
- Looks good on a phone as well as on a large screen.
✦ From the classroom
Gradients came back through AI imagery and glassy interfaces. Students love them.
We ask one question: what does the gradient do? Light, depth, direction or mood?
If there is no answer, a flat color is the better choice.
