How do I animate a gradient?

Gradients cannot be animated directly in CSS. Animate `background-position` on a larger gradient, or use a library like Motion.

Can I import a gradient from CSS?

Yes. Paste an existing `linear-gradient(...)` into the input and the editor loads its stops.

CSS Gradient Generator

Design linear, radial, and conic gradients with a visual editor: drag color stops, adjust angle, and copy the `background` value. Supports multiple color stops and non-standard angles.

Runs locally in your browser

Preview

Angle (135°)135

Color stops (2)

100%

CSS

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

Type

linear

Stops

Angle

135°

Repeating

Box Shadow Generator

Design CSS box-shadows with a live preview.

Color Palette Generator

Build harmonious palettes from a seed color.

Color Converter

Convert between HEX, RGB, HSL, and CMYK.

HEX to RGB

Convert HEX color codes to RGB values and back.

About CSS Gradient Generator

Design linear, radial, and conic gradients with a visual editor: drag color stops, adjust angle, and copy the `background` value. Supports multiple color stops and non-standard angles.

CSS Gradient Generator is part of FizzKit — a collection of focused, browser-based tools. Because everything runs locally, it works offline once loaded and never exposes your data to a remote server.

Frequently asked questions

Linear, radial, and conic. Repeating variants are also available.

Related tools