All tools
Design tools

CSS Gradient Generator

Build linear and radial gradients with a live preview — add multiple stops, adjust angles, and copy the production-ready CSS code in one click.

Linear gradients Radial gradients Multi-stop Custom angle Live preview Copy CSS
Get started free Sign in

Free · No credit card · 50 credits/day

CSS gradient types

Linear gradient

Colors transition along a straight line. Control the angle (0deg–360deg) or use direction keywords like to bottom right.

Radial gradient

Colors radiate from a center point. Choose circle or ellipse shape and position (center, top left, 30% 70%).

Multi-stop gradient

Add as many color stops as you like, each at a precise percentage position for full control over the transition.

Hard stop

Place two stops at the same position for a sharp edge with no fade — useful for striped or split-color layouts.

Transparent stops

Use rgba() or transparent to create overlays on top of images, letting the background show through.

Dark mode gradients

Subtle dark gradients add depth without distraction — great for hero sections, navbars and dark UI backgrounds.

Frequently asked questions

What is the CSS syntax for a linear gradient?

background: linear-gradient(direction, stop1, stop2, ...) — direction can be an angle (135deg) or keyword (to bottom right). Example: background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); Add as many color stops as needed, each with an optional percentage position.

What is the difference between linear-gradient and radial-gradient?

linear-gradient() transitions colors along a straight line. radial-gradient() radiates outward from a center point as a circle or ellipse. Use linear for directional backgrounds (hero sections, cards). Use radial for spotlight effects, glows, or center-weighted visuals.

Can I use gradients without a background image?

Yes — CSS gradients are technically background images but require no network request. Apply them to background, border-image, mask, or text (via background-clip: text + color: transparent). They load instantly and are fully supported across all modern browsers.

How do I make a gradient with a hard stop (no fade)?

Place two color stops at the same position: linear-gradient(to right, #3b82f6 50%, #ef4444 50%). This creates a sharp edge at 50% with no transition. You can stack multiple hard stops to create striped patterns.

Related design tools

More tools for CSS visuals.

CSS Box-Shadow Generator

Create and preview layered CSS box-shadows visually.

 Color Palette Generator

Generate harmonious color palettes for your gradient stops.

 CSS Animation Generator

Add motion to complement your gradient backgrounds.

Build stunning gradients in seconds

Free account. 50 credits per day. Access to 75+ tools instantly.

Create free account →