CSS Gradient Generator — visual builder, copy-ready CSS

Two or three colors, an angle, live preview, and clean background / background-image CSS to paste straight into your stylesheet.

Quick answer: Build linear and radial CSS gradients visually: pick colors, angle and stops, watch the live preview, copy the code. Free, instant, runs entirely in your browser.

3rd color

135°

How to use

Pick your colors and the angle (or radial mode).

About this tool

Modern gradients are one line of CSS, but hand-writing color stops is tedious. This builder composes linear-gradient(angle, c1 p1, c2 p2[, c3 p3]) or radial-gradient(circle, …) with correct percentage stops, previews it at 60+ sizes of smoothness (pure CSS, no canvas needed) and copies both the shorthand background and the full background-image line.

FAQ

Why two CSS lines to copy?

background-image is the property purists use inside rules; background shorthand works too — pick whichever matches your codebase.

Can I add transparency?

Yes — use 8-digit hex like #4f46e580 or rgba() values directly in the color inputs.

Related tools

{ }

CSS Gradient Generator — visual builder, copy-ready CSS

How to use

About this tool

FAQ

Related tools

JSON Formatter

CSV to JSON Converter

Regex Tester

Base64 Encoder / Decoder

URL Encoder / Decoder

Hash Generator (SHA-256)

UUID Generator

Epoch Timestamp Converter

JWT Decoder

Cron Expression Generator

AI Token Counter

Fake Person Generator

Fake Email Generator

Credit Card Validator

Phone Number Validator

Email Validator

Data Storage Converter

HTML Encoder / Decoder

JSON to CSV Converter

CSV to JSON Converter

XML Formatter / Beautifier

SQL Formatter

Markdown Previewer

IP Subnet Calculator

Unix Timestamp Converter

CSS Box Shadow Generator

HTTP Status Code Lookup