CSS Gradient Generator
Design a gradient background visually and copy ready-to-use CSS. Supports linear, radial and conic gradients with two or three colours.
🔒 Everything you type stays in your browser. Nothing is sent to a server.
By Shah Rukh, software developer · Last updated:
How CSS gradients work
linear-gradient(135deg, …)blends colours along a straight line. 0° goes bottom to top, 90° left to right.radial-gradient(circle, …)blends outward from the centre.conic-gradient(from 0deg, …)sweeps colours around a centre point, like a pie chart.
The code includes a solid background colour first, as a fallback for very old browsers. All modern browsers support gradients.
Design tips
- Neighbouring hues (purple to pink) look smoother than opposites (red to green), which can turn muddy in the middle.
- Check text on gradients with the contrast checker at both ends.
Frequently asked questions
Can I use gradients on text?
Yes. Add background-clip: text and color: transparent to the element.
Do gradients slow down a page?
No. CSS gradients are drawn by the browser and are lighter than image files.
How do I make a transparent gradient?
Use a colour with alpha, like rgba(91, 61, 245, 0) as one of the stops.
Related tools
QR Code Generator
Free QR codes for links, Wi-Fi, text and contacts.
Color Picker & Palette
HEX, RGB and HSL codes plus matching palettes.
Contrast Checker
Check WCAG AA/AAA colour contrast for text.
Base64 Encoder / Decoder
Encode or decode Base64 text (UTF-8 safe).
URL Encoder / Decoder
Percent-encode or decode URLs and query strings.
Binary / Hex Converter
Convert between binary, octal, decimal and hex.