CSS Gradient Generator

Create CSS linear, radial, and conic gradients with a visual editor. Drag color stops, adjust angles, toggle repeating mode, and copy the CSS. Includes presets and random generation.

CSS Gradient Generator

Build linear, radial and conic CSS gradients visually

135deg
0%
50%
100%
Stop 1
0%
Stop 2
50%
Stop 3
100%
Sample Text
background: linear-gradient(135deg, #6366F1 0%, #EC4899 50%, #F59E0B 100%);
Presets

What is a CSS Gradient Generator?

A CSS gradient generator lets you visually build linear-gradient, radial-gradient, and conic-gradient backgrounds without writing the CSS by hand. Drag color stops on a bar, adjust angles and positions, and copy the ready-to-use CSS code into your stylesheet.

Supported Gradient Types

  • Linear: Colors transition along a straight line at a configurable angle (0-360 degrees).
  • Radial: Colors radiate outward from a center point in a circle or ellipse.
  • Conic: Colors sweep around a center point like a color wheel, starting from a configurable angle.

Key Features

  • Draggable Color Stops: Click and drag stops on the gradient bar to fine-tune positions.
  • Repeating Mode: Toggle repeating gradients for stripe and pattern effects.
  • Live Preview: See your gradient rendered in real time on rectangle, circle, and text overlay shapes.
  • Presets: Start from 12 curated gradients like Sunset, Ocean, Aurora, and more.
  • Random Generation: Generate random gradients for quick inspiration.

How to use the CSS Gradient Generator

  1. Choose a gradient type: linear, radial, or conic.
  2. Add or remove color stops and drag them to set positions.
  3. Adjust the angle, position, or shape depending on the gradient type.
  4. Toggle repeating mode if you want a striped pattern.
  5. Copy the generated CSS with one click.

Related

toolClamp GeneratorGenerate responsive font-size clamp() CSS.toolViewport Unit ConverterConvert between px and viewport units (vw, vh, vmin, vmax, dvh, svh, lvh, container query units). Includes batch conversion and fluid clamp() generator.toolSVG Wave GeneratorCreate customizable SVG wave shapes easily.toolAspect Ratio CalculatorCalculate aspect ratios and pixel dimensions for media and screens.

Free forever, no ads, no tracking. Support the project