Tailwind & CSS Gradient Generator
Pick two colours and an angle to build a linear CSS gradient, with the generated code ready to copy as either plain CSS or Tailwind classes. The angle is in degrees, where 0 runs bottom to top and 90 runs left to right.
Free, no signupRuns entirely in your browser
Input
Result
- CSS Code
- background: linear-gradient(135deg, #ef4444, #3b82f6);
- Tailwind Class
- bg-gradient-to-r from-[#ef4444] to-[#3b82f6]
About
What the Tailwind & CSS Gradient Generator does
For a smooth result, keep your two colours reasonably close in hue. Gradients between distant hues pass through a muddy middle — red to green goes through brown — because interpolation happens in RGB space. Picking two shades of the same hue, or neighbouring hues, almost always looks better.
How it works
Using the Tailwind & CSS Gradient Generator
- 1Choose the start and end colours.
- 2Set the angle in degrees.
- 3The values are assembled into a linear-gradient() declaration.
- 4A Tailwind class equivalent is generated alongside it.
- 5Copy whichever fits your project.
Use cases
What people use it for
- Building a hero or banner background
- Creating a gradient button or card
- Producing a subtle background wash for a section
- Generating an overlay to improve text contrast over an image
FAQ
Frequently asked questions
6 related
All tools →