Free Online Tool

CSS Gradient Generator

Create beautiful CSS gradients in seconds, copy and use them instantly on your website.

Gradient Settings

Customize your gradient with the controls below

Color 1 *

Color 2 *

Gradient Type

linearradial

Gradient Direction

Include vendor prefixes

Quick Presets

Preview

See your gradient in real-time

CSS Code

background: linear-gradient(to right, #4F46E5, #A78BFA);

How to use CSS Gradient Generator

Create professional gradients in just 4 simple steps

Choose colors

Select 2 or more colors for your gradient

Select type & angle

Choose gradient type and rotation angle

Preview result

See results instantly and make adjustments

Copy code

Paste into your stylesheet and you're done

Why use CSS Gradient Generator

Powerful tool with complete features for all your design needs

Instant Preview

See results immediately when changing colors

One-click Copy

Copy CSS code with just one click

Customizable

Support for multiple colors, directions, angles and types

Responsive UI

Optimized interface on all devices and screens

Understanding CSS Gradient Properties

Learn about gradient properties to create the best effects

linear-gradient()

Creates a linear color transition in a specific direction. Perfect for backgrounds, buttons and elements that need smooth color transitions.

background: linear-gradient(to right, #4F46E5, #A78BFA);

radial-gradient()

Creates a circular effect radiating from the center outward. Ideal for spotlight effects, glow effects or artistic backgrounds.

background: radial-gradient(circle, #4F46E5, #A78BFA);

Angle Control

Define gradient direction using degrees (0-360deg). For example: 45deg creates a diagonal gradient, 90deg creates a top-to-bottom gradient.

background: linear-gradient(45deg, #4F46E5, #A78BFA);

Direction Keywords

Use keywords like "to right", "to bottom" to define gradient direction in a more intuitive and understandable way.

background: linear-gradient(to bottom, #4F46E5, #A78BFA);