Duronto Tech - Free Online Tools
Developer Tools

CSS Gradient Generator

Generate CSS gradient code with visual preview.

How to Use CSS Gradient Generator

1

Choose a gradient type, linear, radial, or conic, and set the angle with the dial or number field.

2

Add, remove, and recolour the stops, dragging each one to change its position percentage.

3

Adjust the alpha of any stop with its opacity slider to build a fade to transparent.

4

Click the "Process" button to render the preview, then copy the generated CSS declaration.

Features

Linear, radial, conic, and repeating variants with copy-paste ready CSS
Draggable stops to change positions and per-stop alpha for smooth fades
Live preview panel so you see the result before it ships
Accepts HEX, RGB, HSL, and eight-digit alpha colours as stop values
Presets for common brand-friendly gradients to start from quickly
Output includes a fallback background colour for older renderers

Frequently Asked Questions

Yes, free with no sign-up, no watermark, and no usage limit. Everything runs in your browser, so you can generate as many variations as a design review takes.
A linear gradient changes colour along a straight line defined by an angle, a radial gradient radiates from a centre point outwards, and a conic gradient rotates the colour around that centre like a colour wheel. Linear suits most backgrounds, radial suits glows, and conic suits spinners.
Add a second stop at the end of the list, set its colour to the same hue, and drag its alpha slider to zero. The result is a smooth fade rather than a hard edge, and the same trick reversed works for a fade-in.
Yes, choose the repeating variant of your chosen type, such as repeating-linear-gradient, and set a single stop with a hard colour change at 0% and 50%. That produces clean diagonal or vertical stripes for backgrounds and dividers.

Related Tools

JSON Formatter

Format and beautify JSON data with proper indentation.

JSON Validator

Validate JSON data and find syntax errors.

JSON Minifier

Minify JSON by removing whitespace and formatting.

HTML Formatter

Format and beautify HTML code.

HTML Minifier

Minify HTML code to reduce file size.

CSS Formatter

Format and beautify CSS code.

About CSS Gradient Generator

Gradients are easy to eyeball and annoying to write, because getting two colours and an angle to look right means guessing a value, previewing it, and adjusting. This generator gives you a visual editor for the whole thing: pick the type, set the angle with a dial, and drag each colour stop to change its position.

Three types cover almost everything. linear-gradient runs in a straight line at an angle, which is the standard choice for hero sections and buttons. radial-gradient radiates outward from a centre point, useful for vignettes and glow effects. conic-gradient sweeps hue around a point, popular for loading spinners and colourful brand panels. Repeating variants tile the pattern for stripes and subtle textures.

Each stop has its own colour and its own alpha, so building a fade to transparent is just dragging the opacity to zero. A live preview panel shows the result before you copy anything, and the generated CSS comes out as a clean multi-line declaration ready to paste into a stylesheet or a component prop. A fallback background colour is included so older renderers still show something sensible.

When to Use This Tool

  • Building a hero section or card background with a brand-coloured fade
  • Creating a hover state that shifts from one accent colour to another
  • Designing a conic gradient loading spinner without hand-writing keyframes
  • Making repeating diagonal stripes for a divider or a subtle texture
  • Producing a glow behind an illustration using a radial gradient