CSS Gradient Generator

Create beautiful linear and radial CSS gradients with a live preview and export clean, ready-to-use CSS code. No design skills required.

Preview

CSS Code

linear-gradient(90deg, #6366f1 0%, #a855f7 100%)

Background Preview

Text

Button

Card

Border

Gradient Type

Angle90°

0°90°180°270°360°

Color Stops

Related Color Tools

Color Palette Generator

Generate palettes from a base color

Palette Export Tool

Export to CSS, Tailwind, JSON & more

CSS Variables Generator

Create CSS custom properties

Color Picker

Pick and convert colors easily

Color Palettes

Explore and generate color palettes

Gradient Palette Generator

Create gradient-based palettes

What This Tool Generates

This tool creates production-ready CSS gradient code for linear and radial gradients. You control the angle (for linear), shape and position (for radial), and add as many color stops as you need. The preview updates in real-time, and you can copy the CSS directly or copy the preview as a PNG image.

Linear vs. Radial Gradients

Linear Gradients

Colors transition along a straight line at a specified angle. 0deg goes bottom to top, 90deg goes left to right, 180deg goes top to bottom, 270deg goes right to left.

linear-gradient(135deg, #6366f1 0%, #a855f7 100%)

Radial Gradients

Colors radiate outward from a center point. You can choose circle (equal radius) or ellipse (stretched), and position the center anywhere (center, top left, bottom right, etc.).

radial-gradient(circle at center, #6366f1 0%, #a855f7 100%)

Working with Color Stops

Each color stop has two properties: the color itself and its position (0-100%). The gradient interpolates smoothly between stops. Key points:

You need at least 2 stops — a start and an end
Stops don't need to be at 0% and 100% — you can have all stops clustered in the middle
The order of stops matters — rearranging them changes the gradient flow
Hard stops are possible by setting two stops at the same position with different colors

Who Uses CSS Gradients and Why

Backgrounds Without Images

Gradients load instantly (no HTTP request), scale to any size without pixelation, and can be modified with CSS variables for theme switching.

Button Hover States

A subtle gradient adds depth to buttons. On hover, shift the angle or adjust color stops for an interactive feel without JavaScript.

Card and Section Dividers

Use a gradient that transitions from your background color to transparent for smooth visual separation between sections.

Loading Skeletons

Animated gradients create the "shimmer" effect on loading placeholders. Generate the base gradient, then animate the background-position.

Tips for Better Gradients

Use colors with similar lightness for subtle gradients. A gradient from #3B82F6 to #1E3A8A (both medium-dark blues) feels more sophisticated than one from bright blue to black.

Add a middle stop for more control. Instead of just start and end, add a stop at 50% with a slightly different hue. This creates a more complex, interesting transition.

Test on both light and dark backgrounds. If your gradient will sit on a colored background, preview it in context. A gradient that looks great on white might disappear on dark gray.

Consider the angle carefully. Diagonal gradients (135deg or 315deg) often feel more dynamic than horizontal or vertical ones. But for UI elements, subtle vertical gradients (180deg, top to bottom) mimic natural light and feel more natural.

Frequently Asked Questions

Can I use RGBA colors for transparent gradients?

Yes, but this tool doesn't have an alpha slider. Manually edit the CSS after copying — change #6366f1 to rgba(99, 102, 241, 0.5) for 50% opacity.

How do I create a hard edge instead of a smooth transition?

Set two color stops at the same position. For example: linear-gradient(90deg, #6366f1 50%, #a855f7 50%) creates a sharp line at the 50% mark.

Why does my radial gradient look cut off?

Radial gradients extend to the farthest corner by default. If your center is off-center (like "top left"), the gradient might extend beyond your visible area. Try adjusting the position or using "ellipse" instead of "circle".

Can I animate CSS gradients?

You can't animate the gradient itself, but you can animate background-position for moving gradients, or transition between two different gradients (though this can be janky). For smooth animations, consider using CSS custom properties and animating those.

What's the browser support for CSS gradients?

Excellent. All modern browsers support linear-gradient and radial-gradient without prefixes. IE10+ has support. You can safely use gradients in production without fallbacks for most use cases.

How do I copy the preview as an image?

Click the "Copy Preview" button. This renders the gradient to a canvas and copies it as a PNG to your clipboard. You can then paste it into design tools, documents, or image editors.

How This Compares to Other Gradient Tools

vs. CSS-Tricks Gradient Generator: This tool has a cleaner interface and lets you reorder color stops with up/down buttons. The preview also shows your gradient applied to sample UI elements (buttons, cards) so you can see it in context.

vs. Grabient: Grabient is great for browsing pre-made gradients. This tool is for creating custom gradients from scratch with precise control over every stop.

vs. Hand-coding: You could write gradient CSS manually, but adjusting angles and stop positions requires trial and error. This tool gives instant visual feedback.

Other Free Color Tools

Search tools