CSS Gradient Generator
Two- and three-colour gradients with a preview.
Runs in your browser. Nothing is uploaded — your input is processed on this device and discarded when you close the tab.
CSS Gradient Generator
How to use this tool
- Choose linear or radial, and an angle for linear gradients.
- Pick two colours (a third is optional) and press Generate.
- Copy the background line into your stylesheet.
Worked example
A linear gradient at 90 degrees from #ff0000 to #0000ff gives 'background: linear-gradient(90deg, #ff0000, #0000ff);', running from red on the left to blue on the right.
What this tool does not do / Limits
At most three colour stops, evenly spaced: custom stop positions (such as 30% or 70%) are not supported, and radial gradients use the default circle shape.
Frequently asked questions
What does the angle mean?
For a linear gradient, 0 degrees runs bottom to top, 90 degrees runs left to right, and 180 degrees runs top to bottom.
Why is colour 3 optional?
Two colours are enough for a simple gradient. Adding a third inserts a middle stop, evenly spaced between the other two.
Related tools
QR Code Generator
Create QR codes for links, contacts, Wi-Fi and locations, with size and error-correction controls, and download as PNG, SVG or PDF.
LiveFavicon Generator
Make a multi-layer ICO, PNG set, manifest and HTML snippet from an image or letter mark.
LiveBarcode Label Maker
Create Code 39 and EAN barcodes and print label sheets at exact millimetre sizes.
Live