Version 2.2 - Changelog
Old version 1 - For Tailwind 1
Visit Gradient Designer.
- Design gradients and store them locally (local storage)
- Uses the colors and shades from TailwindCSS 2
- Export the code as TailwindCSS classes or native CSS
- 26 colors and 220 shades to choose from
- Maximal use of screen space
Add a gradient with the plus sign at the top. When you have added the gradient, click on it to select it.
When you have a gradient selected, you will see three tabs.
The first color is the "from" color. It's required in order for the gradient to work. The middle color is called "via" and the last is called "to".
There is also a "active" switch to toggle the color on or off. Make sure that at least the "from" color is active.
For most of the colors there are also 10 different shades. Transparent, current, black and white does not have any shades.
There is a big preview area showing the gradient. Below it are preview boxes to show how the gradient work as a button and which individual colors are used.
You can change the gradient direction by using the arrows placed on the gradient preview.
You can delete the gradient by using the trash icon placed on the gradient preview.
When you are satisfied with your gradient, you can get the code for it.
You can get the code as Tailwind classes or as native CSS.
If you use Tailwind and need it with pseudo classes, you can use the prefix feature.
If you want, you can give the gradient a name. You can do that by clicking the info icon on the gradient preview.
Please report any issues you encounter.
Donate to DevoneraAB to support my work.
The tool is free to use