LocalToolsOffline browser tools collection

Category: Developer tools

CSS Gradient Generator

System ideaMissing a tool?

Build a linear or radial gradient and copy the CSS

Pick two or three colors, set the angle, preview the result live and copy a ready-to-paste background-image declaration. Everything renders in your browser.

Output
background-image: linear-gradient(135deg, #0f7b63 0%, #1f4f7a 100%);

Everything on this page is processed in your browser. Nothing is uploaded.

What this tool does

A gradient is easier to judge by eye than to write by hand, so this tool renders the real CSS behind a live preview panel as you change it. Choose linear with an angle in degrees or a centred radial gradient, add an optional middle color for a three-stop blend, and copy the declaration straight into your stylesheet.

How to use it

  1. Choose a linear or radial gradient.
  2. Pick the start and end colors, and optionally a middle one.
  3. Adjust the angle, then copy the CSS declaration.

Privacy

This tool runs entirely in your browser. Your input is never uploaded, stored or shared — closing the tab removes it.

Frequently asked questions

Is anything uploaded?
No. The preview is a CSS background painted by your browser and the declaration is built in the page, so nothing is sent to a server.
Do I need vendor prefixes?
Not for current browsers. Unprefixed linear-gradient and radial-gradient have been supported for many years.
Which way does the angle point?
In CSS, 0deg runs bottom to top and the angle increases clockwise, so 90deg runs left to right and 180deg runs top to bottom.

Back to all tools