Linear Gradient Generator

Create beautiful CSS linear gradients with our easy-to-use tool. Customize colors, direction, and angles to design the perfect gradient for your web projects.

Gradient Preview

Colors

Direction

CSS Code

background: linear-gradient(to right, #9333ea, #ec4899);

About Linear Gradients

Linear gradients create smooth transitions between two or more colors along a straight line. They're one of the most versatile and widely used gradient types in web design, perfect for backgrounds, buttons, and other UI elements.

With our linear gradient generator, you can:

  • Choose any number of colors to create simple or complex gradients
  • Set the direction (left to right, top to bottom, or any custom angle)
  • Preview your gradient in real-time
  • Copy the generated CSS code with a single click
  • Get Tailwind CSS classes for your gradient (where possible)

Linear gradients are supported in all modern browsers and can be implemented with simple CSS. Use our tool to experiment with different color combinations and directions to find the perfect gradient for your project.

Try Radial Gradients

Create circular or elliptical gradients that radiate from a central point

Browse Gradient Collection

Explore our curated collection of beautiful pre-made gradients