What's the difference between linear, radial, and conic gradients?

Linear gradients transition colors along a straight line defined by an angle (0deg to 360deg) or a direction keyword like to right or to bottom. Radial gradients radiate outward from a center point in circles or ellipses, controlled by shape (circle or ellipse) and size. Conic gradients (CSS4) rotate colors around a center point like a color wheel or pie chart — useful for donut charts, progress indicators, and angle-based designs. All three gradient types support an unlimited number of color stops at arbitrary positions (0% to 100%) and can be combined using multiple backgrounds in a single CSS declaration.

Free Tool

CSS Gradient Generator

Create linear, radial, and conic CSS gradients visually. Add color stops, adjust positions, and copy the generated CSS instantly.

Live Preview

Gradient Type

Angle135deg

0°180°360°

Color Stops (3/5)

1#6366f10%

2#a855f750%

3#ec4899100%

Generated CSS

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

Paste this property into any CSS rule or <style> block.

Color Stop Preview

0%50%100%

Why Use Our Gradient Generator?

All three gradient types, live preview, and clean CSS output — no signup needed.

Live Preview

A full 16:9 preview box updates instantly as you tweak colors, angles, and positions.

Three Gradient Types

Linear, radial, and conic gradients — all supported with type-specific controls.

Up to 5 Color Stops

Add or remove color stops with precision position sliders for complex, multi-tone gradients.

Angle & Position Controls

Precise slider for linear angle (0–360°), shape selector and position for radial gradients.

Copy-Ready CSS

One-click copy of the complete background CSS property, ready to paste into any stylesheet.

Browser Compatible

Generated CSS works in all modern browsers — no vendor prefixes needed.

Frequently Asked Questions

Can I use gradients in Tailwind CSS?

Yes! Tailwind has gradient utilities like `bg-gradient-to-r from-pink-500 to-purple-600`. For custom gradients, use the `[background:...]` arbitrary value syntax.

Are CSS gradients supported in all browsers?

CSS gradients are supported in all modern browsers including Chrome, Firefox, Safari, Edge, and mobile browsers. No prefix needed since 2013.

What's the difference between linear and radial gradients?

Linear gradients transition colors along a straight line (set by angle). Radial gradients radiate from a center point outward in circles or ellipses.

Need a custom UI design system?

From gradient brand systems to full component libraries — we design and build production-ready UIs.

Get in Touch All Tools

Disclaimer: This tool is provided for informational and educational purposes only. Preview renderings are approximations and may differ from actual platform displays due to platform updates, caching, or rendering differences. We fetch publicly available metadata and do not store or share your URLs. Platforms may cache old data even after you update your content—use their official debug tools to refresh caches. ZIRA Software is not liable for any decisions made based on this tool's output.

Loading tools...