A gradient (colors that change gradually) adds depth and mood more easily than a solid background. You can use one right away as a thumbnail, card or banner background, even without a photo.
Types of gradients
| Type | What it does | Works well for |
|---|---|---|
| Linear | Colors change in one direction | Banners, card backgrounds |
| Radial | Spreads out from the center | Backgrounds that highlight a focal point |
| Diagonal | A linear gradient at an angle | When you want a dynamic feel |
Picking two colors
Two very different colors make the transition look distinct, while two shades of the same family (for example two blues) blend smoothly. To take colors from a photo, extract two main colors with the Color Palette Generator and put them into the Gradient Generator.
Step by step
- Open the Gradient Generator.
- Pick a start color and an end color, or use HEX codes you extracted from a photo.
- Choose the type (linear, radial or conic) and the angle.
- Save it as an image (the PNG is 1920×1080) or copy the ready-to-use CSS code.
Which gradient suits which mood?
Blue linear gradients are often used for a cool, trustworthy mood, while orange and yellow suit a lively, warm feel. For a premium look, gradients from black to deep purple or navy are popular. The mood-based color table in our color scheme guide works for choosing the two gradient colors too.
Gradient vs. solid vs. photo backgrounds
Solid backgrounds are clean but can look plain, and photo backgrounds are rich in mood but text easily gets lost. Gradients sit in between: they add depth without a photo, and it's fairly easy to predict where text will sit. They are especially useful for content where photos are hard to find (informational posts, notices and so on).
Putting text on a gradient
Gradients are often light on one side and dark on the other, so a single text color may not read well on both. It's safer to add an outline or shadow to the text, or to choose colors whose brightness barely changes where the text will go.
What angle works best?
There is no single answer, but many people find 135 degrees (top left to bottom right) natural and balanced. A slight tilt adds more energy than perfectly horizontal (0 degrees) or vertical (90 degrees). Try a few angles and keep the one that fits your design best.
Good vs. bad examples
- Good: The two colors are close in brightness, so they blend smoothly.
- Bad: The colors are so different that a visible band appears in the middle.
- Good: The text has an outline, so it reads anywhere on the gradient.
- Bad: A single text color disappears on the lighter area.
Common mistakes
- Mixing three or more colors so it looks like a rainbow. Start with two.
- Placing text without considering the gradient direction, so important text ends up in the dark area.
- The copied CSS looks slightly different on another site. Color rendering can vary a little between browsers and programs.
Checklist
- Did you keep it simple with two colors?
- Did you check the brightness change before placing the text?
- Is the image the right size for where you'll use it?
- Did you copy the CSS code if you need it?
FAQ
Can I layer a photo with a gradient?
Yes. Placing a semi-transparent gradient over a photo lets you adjust its brightness and add mood.
How do I use the CSS code?
Paste the copied code into your website's background style and the same gradient is applied. No coding knowledge is needed; just copy and paste.
How many colors can a gradient have?
The tool starts with two colors, and you can add more up to five. Starting with two is the easiest way to keep it clean.
Do I need to think about fonts on a gradient background?
Yes. Because the brightness changes across the background, a bold font with an outline reads more reliably everywhere than a thin font.