What is a CSS gradient?

CSS gradient is a smooth transition between multiple colors. Linear gradient goes in a direction (left to right, top to bottom, or angled). Radial gradient spreads from a center point outward. Gradients create smooth backgrounds without image files.

How do I create a linear gradient?

Syntax: background: linear-gradient(direction, color1, color2, ...). Direction can be: to right, to left, to bottom, to top, or degrees (45deg, 90deg). Add multiple colors for complex gradients. Use transparent colors for fade effects.

Can gradients have more than two colors?

Yes! Add as many colors as needed. You can also specify color stops: color1 0%, color2 50%, color3 100%. This controls where each color appears. Use stops to create stripes, smooth transitions, or custom patterns.

CSS Gradient Generator - Create Beautiful Gradients

Preview

Gradient Type

Direction

Colors

CSS Code

background: linear-gradient(to right, #14b8a6, #3b82f6);

Create beautiful CSS gradients with multiple colors. Supports linear and radial gradients with customizable direction.

What is CSS Gradient Generator?

CSS gradients create smooth, seamless color transitions without requiring any image files, reducing page weight and HTTP requests. Linear gradients flow along a straight line in any direction — horizontal, vertical, or diagonal — specified by keywords (to right, to bottom right) or angle values (45deg, 180deg). Radial gradients radiate outward from a center point in a circular or elliptical pattern, creating spotlight and vignette effects. Both types support multiple color stops, enabling complex multi-color transitions for hero sections, buttons, overlays, and decorative backgrounds. Gradients are rendered by the browser at the element's actual size, so they scale perfectly on any display resolution without pixelation. This generator lets you design gradients visually with live preview, add up to five color stops, and copy the generated CSS background property directly into your stylesheet.

How to Use

Choose gradient type: Linear or Radial
For linear, select direction (right, left, top, diagonal)
Add colors (minimum 2, maximum 5)
Adjust colors using color picker or hex input
Preview gradient in real-time
Copy generated CSS to your stylesheet

Why Use This Tool?

Visual gradient design with live preview

Linear and radial gradient support

Multiple color stops (up to 5)

Custom direction selection

Copy-ready CSS background property

No image files needed for gradients

Tips & Best Practices

2-3 colors create clean gradients
Linear: 'to right' is most common
Radial: good for buttons and spotlights
Color stop order matters left-to-right
Match brand colors for consistent design
Test gradient on actual elements in your design

Frequently Asked Questions

What's the difference between linear and radial?

Linear gradients flow in a straight direction (horizontal, vertical, or diagonal). Radial gradients spread from a center point outward in a circular pattern. Linear suits backgrounds and headers; radial suits buttons, icons, and spotlight effects.

How many colors can I use?

2 to 5 color stops. Minimum 2 creates a basic gradient. 3-4 colors create complex transitions. More stops allow multi-color themes. CSS supports unlimited stops, but this tool limits to 5 for usability.

Can I set color stop positions?

This tool automatically distributes colors evenly. For custom positions, edit the CSS: add percentages after colors (e.g., #color1 0%, #color2 50%, #color3 100%). Positions control where each color starts in the gradient.

What directions are available?

Linear: to right, left, top, bottom, and four diagonals (top-right, top-left, bottom-right, bottom-left). Radial: circle from center. Use angles for custom directions: linear-gradient(45deg, ...)

How do I create transparent gradients?

Use RGBA colors or hex with alpha (#RRGGBBAA). Example: rgba(255,0,0,0.5) creates semi-transparent red. Transparent gradients overlay images or blend with backgrounds.

Do gradients work everywhere?

CSS gradients work in all modern browsers. Background property accepts gradients. You can also use gradients in border-image, mask-image, and list-style-image for creative effects.

Is my gradient design kept private?

Yes. All gradient generation happens locally in your browser. No color choices or CSS values are ever sent to a server or stored anywhere.

When should I NOT use CSS gradients?

Avoid gradients when you need precise color transitions that must match a specific design file pixel-for-pixel — use a background image instead. Also skip them for email templates, where many email clients strip gradient CSS. For very complex multi-directional or mesh gradients that CSS can't produce, use an SVG or raster image. Gradients also aren't ideal when you need animated gradient transitions, as CSS gradient animation support is limited.

Real-world Examples

Creating a hero section background gradient

A common web design pattern uses a diagonal gradient for the hero section background, transitioning from a brand color to a darker shade.

Input

Type: Linear, Direction: to bottom right, Colors: #14B8A6 → #0F172A

Output

background: linear-gradient(to bottom right, #14B8A6, #0F172A);

Designing a radial spotlight button effect

A radial gradient creates a glowing spotlight effect on a call-to-action button, drawing the user's attention.