What is the difference between linear, radial, and conic gradients?

A linear gradient transitions colors along a straight line at a given angle (e.g. left-to-right or 45°). A radial gradient radiates colors outward from a single point — its shape can be a circle or ellipse. A conic gradient sweeps colors around a center point like the slices of a pie. All three are supported in modern browsers and you can generate any of them with this tool.

How do CSS color stops work?

Each color stop in a gradient defines a color and a position (0%–100%) along the gradient line. The browser smoothly interpolates between consecutive stops. For example, "red 0%, blue 100%" produces a smooth red-to-blue transition. Adding a stop at 50% with a third color creates a three-color gradient. This tool lets you add up to 10 stops and slide each one independently.

How do I use a CSS gradient in Tailwind CSS?

Tailwind has built-in utilities for simple linear gradients: bg-gradient-to-r from-red-500 to-blue-500. For custom gradients with multiple stops or non-linear types, use Tailwind's arbitrary value syntax — bg-[linear-gradient(45deg,#FF6B6B,#FFD93D)] — or define a custom utility in tailwind.config.js. Copy the CSS this tool produces and drop it directly into the arbitrary value syntax.

Are CSS gradients supported in all browsers?

Linear and radial gradients are supported in every modern browser and have been since 2012. Conic gradients are supported in all evergreen browsers (Chrome, Edge, Firefox, Safari) since 2020. If you need to support legacy browsers like Internet Explorer 11, provide a solid background-color fallback before the gradient declaration.

How do I make sure text is readable on a gradient background?

Gradients can hurt text contrast because the background color varies. Pick the darkest stop (or lightest, depending on text color) and check its contrast against your text using the WCAG ratio of at least 4.5:1 for normal text. Alternatively, overlay a semi-transparent solid color on top of the gradient. Our [Hex Color Picker](/hex-color-picker) shows contrast ratios for any color.

Can I use this gradient as an SVG or image?

CSS gradients are rendered by the browser and don't produce a file by themselves. To export a gradient as an image, take a screenshot of the preview or use a tool like [Image to Base64](/image-to-base64) to embed it. For SVG-based gradients, convert the CSS values to SVG or definitions — the angle and stops map directly.

CSS Gradient Generator — Linear, Radial, Conic

CSS Gradient Generator

Build linear, radial, and conic CSS gradients with live preview and one-click copy

Processed locally in your browser

Gradient Type

Angle90°

Color Stops (2/10)

#10B981

#06B6D4

100%

Preview

CSS Code

Include background: prefix

background: linear-gradient(90deg, #10B981 0%, #06B6D4 100%);

Presets

Unlock the full toolkit

Batch processing, no ads, higher limits, and API access.

Go Premium

How to Use

1. Pick a gradient type — linear, radial, or conic. 2. Adjust the angle (linear/conic), shape (radial), or position from the controls. 3. Edit existing color stops or add new ones — drag the position slider to slide the color along the gradient. 4. Use a preset for inspiration or click Random for a fresh combination. 5. Copy the generated CSS and paste it into your stylesheet. Use the Hex Color Picker for fine-tuning individual stop colors.

Features

✓Linear, radial, and conic gradient builder
✓Live preview updates as you tweak
✓Add up to 10 color stops with individual position sliders
✓Adjustable angle (0–360°) for linear and conic gradients
✓Radial shape (circle/ellipse) and 9 position presets
✓One-click copy of full CSS — with or without the background: prefix
✓8 curated presets: Sunset, Ocean, Forest, Lavender, Peach, Mint, Cosmic, Aurora
✓Random gradient generator for inspiration
✓Fully client-side — no signup, no upload, no data leaves your browser

Frequently Asked Questions

What is the difference between linear, radial, and conic gradients?: A linear gradient transitions colors along a straight line at a given angle (e.g. left-to-right or 45°). A radial gradient radiates colors outward from a single point — its shape can be a circle or ellipse. A conic gradient sweeps colors around a center point like the slices of a pie. All three are supported in modern browsers and you can generate any of them with this tool.
How do CSS color stops work?: Each color stop in a gradient defines a color and a position (0%–100%) along the gradient line. The browser smoothly interpolates between consecutive stops. For example, "red 0%, blue 100%" produces a smooth red-to-blue transition. Adding a stop at 50% with a third color creates a three-color gradient. This tool lets you add up to 10 stops and slide each one independently.
How do I use a CSS gradient in Tailwind CSS?: Tailwind has built-in utilities for simple linear gradients: bg-gradient-to-r from-red-500 to-blue-500. For custom gradients with multiple stops or non-linear types, use Tailwind's arbitrary value syntax — bg-[linear-gradient(45deg,#FF6B6B,#FFD93D)] — or define a custom utility in tailwind.config.js. Copy the CSS this tool produces and drop it directly into the arbitrary value syntax.
Are CSS gradients supported in all browsers?: Linear and radial gradients are supported in every modern browser and have been since 2012. Conic gradients are supported in all evergreen browsers (Chrome, Edge, Firefox, Safari) since 2020. If you need to support legacy browsers like Internet Explorer 11, provide a solid background-color fallback before the gradient declaration.
How do I make sure text is readable on a gradient background?: Gradients can hurt text contrast because the background color varies. Pick the darkest stop (or lightest, depending on text color) and check its contrast against your text using the WCAG ratio of at least 4.5:1 for normal text. Alternatively, overlay a semi-transparent solid color on top of the gradient. Our Hex Color Picker shows contrast ratios for any color.
Can I use this gradient as an SVG or image?: CSS gradients are rendered by the browser and don't produce a file by themselves. To export a gradient as an image, take a screenshot of the preview or use a tool like Image to Base64 to embed it. For SVG-based gradients, convert the CSS values to SVG <linearGradient> or <radialGradient> definitions — the angle and stops map directly.