CSS Gradient Generator

Create beautiful gradients with live preview and copy-ready CSS or Tailwind code

Live Preview

CSS & Tailwind

Interactive Editor

See your gradient in real-time

Interactive Color Bar - Click to add, drag to move

💡 Click anywhere to add a color stop, drag existing stops to reposition them, click a stop to edit it

Type

Direction

Copy the code to use in your project

Background Property

background: linear-gradient(90deg, #2A7B9B 0%, #57C785 50%, #EDDD53 100%);

CSS Class

.gradient {
  background: linear-gradient(90deg, #2A7B9B 0%, #57C785 50%, #EDDD53 100%);
}