Linear, radial and conic gradients
CSS has three kinds of gradient, and each one blends colours along a different path.
- Linear: colours change along a straight line. 0deg runs bottom to top, 90deg left to right and 180deg top to bottom.
- Radial: colours spread out from a centre point in a circle. Good for soft glows and spotlight backgrounds.
- Conic: colours sweep around a centre point like a clock hand. Useful for colour wheels and shimmery, holographic looks.
How colour stops work
Each stop is a colour and a position from 0% to 100% along the gradient, and the browser blends smoothly between neighbouring stops. Put two stops close together for a sharper change, or spread them out for a slow fade.
Two stops at the same position give a hard line instead of a blend, which is how striped backgrounds are made. For a conic gradient that loops without a seam, make the first and last colours the same.
Stops don't have to be in order in the editor. The CSS lists them by position, so you can add a stop and drag it anywhere without breaking the gradient.
Making gradients that look good
Colours close together on the colour wheel blend cleanly. Opposites, like blue and orange, often pass through a muddy grey in the middle. If that happens, add a brighter third stop between them, or choose two colours with similar lightness.
Keep text readable. Check your text colour against the lightest and the darkest part of the gradient, not just the middle, because the contrast changes across the background.
Subtle usually wins. Two shades of the same hue a little apart in lightness look calm and modern, while three or more saturated colours can feel busy behind photos and text. Save the bold, multi-colour blends for small areas or a single hero image.
Using the CSS, Tailwind class and wallpaper
Paste the CSS into any style rule. In Tailwind, the arbitrary class works without touching your config. Spaces become underscores in Tailwind classes, which is why it looks slightly different from the CSS.
The PNG is 1080 × 1920 pixels, the size of a phone screen and of Instagram and TikTok stories. Use it as a lock screen, a story background behind text, or a matching background for your link-in-bio page.
Frequently asked questions
How do I make a gradient in CSS?
Use the background property with a gradient function, for example background: linear-gradient(135deg, #2875c5 0%, #7dd3fc 100%). The angle sets the direction and each colour can have a position.
What angle should I use for a linear gradient?
135deg, top left to bottom right, is the most common because it feels natural. 180deg gives a top to bottom fade, which works well behind text.
Do CSS gradients work in every browser?
Linear and radial gradients work in every modern browser. Conic gradients work in current versions of Chrome, Edge, Safari and Firefox.
How do I use a gradient in Tailwind?
Copy the Tailwind class from this tool. It uses an arbitrary value, bg-[...], so you don't need to add anything to your Tailwind config.
What size is the wallpaper download?
1080 × 1920 pixels, a 9:16 portrait image. It fits most phone lock screens and Instagram, TikTok and Facebook stories.