Developer

CSS Gradient Generator: Linear & Radial

Design beautiful linear and radial CSS gradients with live preview. Copy-ready code.

100% Client-SideNo Data StoredFree ForeverNo Signup
CSS Gradient Generator
Angle135°
0%
100%
CSS
background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);

How to Use CSS Gradient Generator

  1. 1

    Pick gradient type: linear or radial.

  2. 2

    Add colour stops and drag to position.

  3. 3

    Adjust angle (linear) or shape (radial).

  4. 4

    Copy the generated CSS.

About CSS Gradient Generator

Design beautiful CSS gradients visually and copy production-ready code. Supports linear gradients (0-360° angle) and radial gradients (circle or ellipse). Add up to 6 colour stops, fine-tune their positions, and see the result live. Output is pure CSS3. Works everywhere without prefixes.

FRI

Built by

Fateh Raiyan Ishmum

Full-stack dev since 2020. Full-stack web developer since 2020. Builds privacy-first, open-web tools. Specialises in Next.js, TypeScript, and performance-focused design.

Frequently Asked Questions

Linear gradients (with angle) and radial gradients (circle or ellipse).

Up to 6 color stops with adjustable position percentages.

Yes. Output is standard CSS3 syntax supported by all modern browsers. No vendor prefixes needed.

More Free Tools

Color Converter

Convert colors between HEX, RGB, and HSL formats. Pick colors visually.

CSS Minifier

Minify CSS code to reduce file size. Remove comments, whitespace, and unnecessary characters.

HTML Minifier

Minify HTML by removing comments, whitespace, and unnecessary tags.