CSS Gradient Generator — Free Online Tool

Create beautiful CSS linear gradients with two colours and a direction. Preview live and copy the CSS.

Save this tool Keep it in your list and reopen your work later — no sign-up, nothing uploaded.

My saved items

How to use CSS Gradient Generator

Pick two colours and a direction.
See the live preview.
Copy the background CSS.

Frequently asked questions

Where do I paste it?

Use it as the background property of any element.

Your privacy is protected

This tool runs entirely inside your browser. No file, text or number you enter is ever sent to our servers, stored, or shared. Close the tab and everything is gone.

Related tools

Base64 Encoder / Decoder

Encode text to Base64 or decode Base64 back to readable text. Developers use this for AP…

JSON Formatter & Validator

Beautify messy JSON into readable, indented format or minify it to save space. It also t…

URL Encoder / Decoder

Safely encode text for use inside a URL, or decode a messy percent-encoded link back to …

HTML Entity Encoder

Convert characters like <, > and & into safe HTML entities so your code snippe…

CSV to JSON Converter

Turn spreadsheet CSV data into clean JSON that APIs and apps can read. Paste a CSV expor…

UUID Generator

Generate random UUID v4 identifiers for databases, API keys and unique record IDs. Creat…