Skip to content
Zoyku

CSS Gradient Generator

Blend two to five colors into linear, radial or conic CSS gradients with a live preview, ready-to-paste code and one-click harmonized palettes.

Color stops

Palettes

Angle: 135°
Live preview
CSS
background-color: #7C3AED; /* fallback for old browsers */
background-image: -webkit-linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
background-image: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);

0° points up and 90° to the right — the angle runs clockwise.

This tool runs entirely in your browser. Your data never leaves your device — it is not uploaded to any server.

How to use

  1. 1Set two to five colors, or start from a preset palette.
  2. 2Choose the gradient type, then set the angle or shape; optionally pin stop positions.
  3. 3Copy the CSS block and paste it into your stylesheet.

CSS Gradient Generator

Pick two to five colors, choose linear, radial or conic, and drag the angle — the preview updates as you type and the CSS is always one copy away. Leave a stop's position blank and it is placed automatically the way CSS would, or set exact percentages for hard stops and off-center blends.

The output ships as a real production block: a solid-color fallback line for ancient browsers, a -webkit- prefixed line for old WebKit builds, and the standard syntax last. A random-harmonize button rotates the hues of your palette in HSL space so every shuffle stays balanced instead of clashing.

Frequently asked questions

Why does the CSS include a -webkit- prefixed line?

It is a compatibility line for legacy WebKit browsers (roughly Safari 5–6 era) that only understood -webkit-linear-gradient. Every browser from the last decade reads the standard line, so you can delete the prefixed one if you do not need to support those versions — it costs one line to keep and nothing if you drop it.

What does the angle in a linear gradient mean?

It is the direction the gradient travels, measured clockwise from pointing up: 0deg goes bottom-to-top, 90deg left-to-right, 180deg top-to-bottom. The tool normalizes any angle you give (−45 becomes 315) and the old syntax's opposite-direction convention is handled for you in the -webkit- line.

When should I use a conic gradient instead of linear or radial?

Conic sweeps color around a center point — that is what pie charts, angle dials and sunburst effects are made of. Linear blends along a straight line and radial radiates from a center outward. Same stops, completely different geometry, so switch type and watch the preview rather than guessing.

Related tools

All Utility tools →

Contrast Checker

Check the WCAG contrast ratio between two colors with AA and AAA pass/fail for normal and large text, plus a live preview. Runs entirely in your browser.

All tools →

Color Converter

Paste a color in hex, rgb() or hsl() and get all three formats plus a ready-made row of tints and shades for your design system.

All tools →

Color Picker

Pick a color from the swatch or grab one straight from your screen with the EyeDropper API — hex, RGB and HSL copied in one click.

All tools →

Image Border

Add a solid-color or transparent border around one image or a whole batch — live preview, PNG or JPG output, runs entirely in your browser.

All tools →

Embed this tool

Put this tool on your own site with one line — it runs entirely in the visitor's browser.

<iframe src="https://zoyku.com/en/tools/gradient-generator?embed=1" width="100%" height="640" style="border:0;border-radius:16px" title="Zoyku — gradient-generator" loading="lazy"></iframe>
100% local processing