More in this category
Color Picker HEX to RGB Converter Box Shadow Generator Border Radius Generator SVG Viewer

CSS Gradient Generator

Build beautiful linear and radial CSS gradients. Add color stops, tune the angle, preview live and copy the ready-to-use CSS. Free, private, browser-based.

All processing happens locally in your browser. Files are never uploaded.

Color stops

Generated CSS

background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);

Introduction

CSS Gradient Generator lets you design backgrounds visually and get the exact CSS. Switch between linear and radial gradients, add as many color stops as you need, drag the angle for linear gradients, and copy the declaration straight into your stylesheet. The preview updates as you tweak.

Features

  • Linear and radial gradient modes
  • Add and remove up to 12 color stops
  • Fine-tune the angle from 0 to 360 degrees
  • Set each stop position in percent
  • Live preview and one-click CSS copy

How to use

  1. 1Choose Linear or Radial at the top.
  2. 2Adjust the angle slider for a linear gradient.
  3. 3Add or remove color stops and pick each color and position.
  4. 4Copy the generated CSS declaration into your project.

Frequently asked questions

Related tools

Color Picker

Pick colors with a native color wheel and instantly convert between HEX, RGB and HSL. Copy any value with one click. Free, private, runs in your browser.

HEX to RGB Converter

Convert HEX color codes to RGB and back instantly. Supports 3 and 6 digit HEX values, validates input and copies results. Free, private, browser-based.

Box Shadow Generator

Design CSS box shadows visually. Tune offset, blur, spread and color, toggle inset shadows, preview live and copy the CSS. Free and private.