Daily ToolsEveryday utilities
Home All tools CSS Gradient Generator
FREE ONLINE TOOL · NO SIGN-UP

CSS Gradient Generator

Build a linear or radial CSS gradient, preview it live, copy the code or download it as a PNG.

← All tools

Pick two or three colours, set the angle and stops, and the preview updates live. Copy the CSS into your stylesheet, or download the gradient as a PNG.

How to use

Choose linear or radial, pick two or three colours, and set the angle (linear only) and the stop positions. The preview updates as you change anything. Press Copy CSS to put the gradient rule on your clipboard, or Download PNG to save a 1200 × 800 image of the gradient. The third colour is optional — uncheck it for a two-colour blend.

Where do I paste the CSS?

Into any stylesheet or a style attribute, for example as the background of a section, button or card. The rule works in every modern browser.

About the CSS Gradient Generator

The CSS Gradient Generator builds a linear or radial colour gradient in your browser: pick two or three colours, set the angle and the stop positions, and the preview updates live. Copy the finished CSS rule into your stylesheet, or download the gradient as a 1200 × 800 PNG. It is a plain CSS tool, not an AI tool — the gradient is exactly the colours and stops you chose. Like every tool on this site, it runs entirely in your browser: there is no sign-up, nothing you type is sent to a server, and it works the same on a phone, tablet or desktop. Bookmark this page to come straight back to the CSS Gradient Generator whenever you need it.

Questions or a wrong result? Email bingeul29@gmail.com with the tool name and what you entered.

Related tools

Color PickerPick a colour and get HEX, RGB and HSL. Favicon GeneratorMake PNG favicons and an ICO file from any image. Background RemoverRemove a background and download a transparent PNG. CSS Gradient GeneratorBuild a linear or radial CSS gradient.