How to use it
Pick a type and colors
Linear, radial or conic, then your colors and their positions, or start from a preset.
Copy the code
Paste it into the CSS of the element you want, or in WordPress under “Additional CSS”.
Or download the image
A PNG background for posts, slides and phone wallpapers, in the size you need.
Gradient types
| Type | Looks like | Good for |
|---|---|---|
| Linear | From one side to another at your angle | Section backgrounds and buttons |
| Radial | From the center outwards | Highlighting something in the middle |
| Conic | Sweeps around a point like a clock hand | Color wheels and pie-style graphics |
Tips for a good gradient
Close colors look best. Pick two colors from the same family, or two shades of your brand color.
Mind text on top. Check text contrast against the lightest and darkest points with the color contrast checker.
Grey in the middle. Between opposite colors like blue and yellow a normal gradient passes through dull grey; “Smoother blend” keeps colors clean.
FAQ
How do I add the gradient to my site?
Copy the CSS into the element’s rule, like .my-section { … }. In WordPress: Appearance → Customize → Additional CSS.
Is a CSS gradient better than an image?
On websites, yes: no image to download, so pages load faster, and it fits any screen. Use the PNG for posts, slides and places that don’t take CSS.
What does in oklch mean in the code?
A modern way of mixing colors that gives cleaner gradients. Modern browsers support it; older ones skip that line and use the one before it.
How do I make a gold gradient?
Pick the gold preset (#BF953F, #FCF6BA and #B38728), then adjust the angle until it looks like shiny metal.
Can I use the images in any project?
Yes. The gradient you make is yours, and it’s made in your browser without uploading anything.