Tailwind Color Gradient Generator
This is a simple color gradient generator for Tailwind CSS.
It uses Alpine.js for interactivity and Color.js for interpolating between the colors.
This is a simple color gradient generator for Tailwind CSS.
It uses Alpine.js for interactivity and Color.js for interpolating between the colors.
Choose the start and end colors using the HSL sliders.
This determines in which color space the interpolation happens. Choose between:
This determines how the colors are interpolated in the polar coordinate space. Choose between:
To use the colors in Tailwind, click the "Copy to clipboard" button and paste it into your Tailwind config:
theme: {
extend: {
colors: {
'brand': {
100: 'hsl(474 0% 98%)',
200: 'hsl(442.625 9.75% 86.625%)',
300: 'hsl(411.25 19.5% 75.25%)',
400: 'hsl(379.875 29.25% 63.875%)',
500: 'hsl(348.5 39% 52.5%)',
600: 'hsl(317.125 48.75% 41.125%)',
700: 'hsl(285.75 58.5% 29.75%)',
800: 'hsl(254.375 68.25% 18.375%)',
900: 'hsl(223 78% 7%)',
},
},
},
},