codeyaan

CSS Gradient Generator

CSS Tools

Create beautiful CSS linear and radial gradients visually

Runs in browser Instant No tracking

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

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

FAQ

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