vextil
Back to Color Tools

Gradient Generator

Create beautiful CSS gradients with our generator. Choose colors, direction, and type – and copy the finished CSS code directly into your project.

Color Settings
Select two colors for your gradient
Preview
Color Steps
Code
background: linear-gradient(to right, #667eea, #764ba2);
bg-gradient-right from-[#667eea] to-[#764ba2]
How to use
  1. 1Choose start and end colors
  2. 2Select number of steps
  3. 3Copy CSS code or individual colors
Features
  • Color Gradients

    Creates smooth transitions between two or more colors.

  • CSS Code

    Generates ready-to-use CSS linear-gradient code.

  • Multiple Stops

    Add as many color stops as you want.

  • Direction

    Choose gradient direction (horizontal, vertical, diagonal).

FAQ

How many colors can a gradient have?

As many as you want. You can add unlimited color stops.

Can I create radial gradients?

Currently only linear gradients. Radial gradients coming in a future version.

Does the CSS code work in all browsers?

Yes, the generated code uses the standard linear-gradient syntax that works in all modern browsers.

Related Tools

Color Blend

Blend two colors together

Color Palette Generator

Create harmonious color palettes

Color Converter

Convert between color formats

Color Contrast Checker

Check WCAG contrast ratios

Note: All processing happens in your browser. Your files are not uploaded to any server.