CSS Gradient Generator
Build linear and radial CSS gradients from up to five colours, preview them, and copy ready to use CSS for backgrounds and buttons.
Runs on your device
Result
Results appear here as you type.
What it does
Choose colours and an angle. The preview image is drawn from the same values, and the CSS works in every modern browser without prefixes.
How to use it
- Pick two to five colours.
- Choose linear or radial and the angle.
- Copy the CSS.
Example
The example fills in realistic values and runs the tool. Select Try an example above to see it.
When it helps
- Hero backgrounds.
- Buttons and badges.
- Social media graphics.
Questions
Do I need -webkit- prefixes?
No. Unprefixed gradients are supported by all current browsers.
How are stops spaced?
Evenly from 0% to 100%. Edit the percentages in the CSS for custom spacing.
More developer tools
See all 25- User Agent Parser Parse a browser user agent string into browser, version, operating system, rendering engine and device type. Shows your own by default.
- XML Formatter & Validator Pretty print and validate XML for sitemaps, RSS feeds, SOAP and config files, with clear well formedness errors. Parsed safely, never executed.
- Password Strength Checker Check how strong a password is with an entropy estimate, common password and pattern detection, and an estimated offline cracking time.
- JSON Formatter & Validator Format, validate, minify or key sort JSON with clear error messages. Runs in your browser, so API responses and configs never leave your device.
- Base64 Encoder & Decoder Encode text to Base64 or Base64URL and decode it back, with full UTF-8 support for accents, Urdu script and emoji.
- URL Encoder & Decoder Percent encode or decode URL components and full URLs. Handles Unicode and reports malformed escape sequences instead of failing silently.
People also use
Browse all 200 tools- Text to Handwriting Turn typed text into a realistic handwritten page on lined or plain paper, with ink colour choices, and download it as an image. Text & writing
- Tip Calculator & Bill Splitter Add a tip and split a restaurant or group bill evenly between people, with an option to round each share up to a whole number. Everyday
- Extract Audio from Video Pull the soundtrack out of an MP4, MOV or WebM video and save it as a WAV audio file, for the whole video or a selected section. Media & files
- Remove Duplicate Lines Delete repeated lines from a list while keeping the first occurrence and original order, with options to ignore case and surrounding spaces. Text & writing