Codeyaan codeyaan

CSS Gradient Generator

Create beautiful CSS linear and radial gradients visually

CSS Tools Runs in your browser

Color Stops (2)

0%
100%

Output

CSS

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

Tailwind (Arbitrary Value)

bg-[linear-gradient(135deg,_#667eea_0%,_#764ba2_100%)]

SCSS Variable

$gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

Presets

How to Use

1Choose between linear or radial gradient type
2Add, remove, or adjust color stops and their positions
3Adjust the angle for linear gradients
4Try presets or the Random button for inspiration
5Copy the CSS, Tailwind class, or SCSS variable

Frequently Asked Questions

What is a CSS gradient?

A CSS gradient is a smooth transition between two or more colors. Linear gradients transition along a line, while radial gradients radiate from a center point.

Can I use more than two colors?

Yes! This tool supports unlimited color stops. Click "Add Stop" to add more colors at specific positions along the gradient.

What are color stop positions?

Each color stop has a position (0-100%) that defines where that color appears in the gradient. A color at 0% is at the start, 100% is at the end.

Are CSS gradients supported in all browsers?

Yes, CSS gradients are supported in all modern browsers without prefixes. They work in Chrome, Firefox, Safari, Edge, and all mobile browsers.

Related Tools

CSS Shadow Generator

Design box shadows and text shadows with a visual editor

Color Converter

Convert colors between HEX, RGB, HSL, and CMYK formats

Tailwind Colors

Browse and copy Tailwind CSS color palette values