Adding gradients with Tailwind CSS
August 30, 2023
Following code in tailwind.config.js file.
module.exports = {
theme: {
extend: {
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
}
}
}
Linear gradient background.
<div class="h-14 bg-gradient-to-r from-cyan-500 to-blue-500"></div>
<div class="h-14 bg-gradient-to-r from-sky-500 to-indigo-500"></div>
<div class="h-14 bg-gradient-to-r from-violet-500 to-fuchsia-500"></div>
<div class="h-14 bg-gradient-to-r from-purple-500 to-pink-500"></div>
Linear gradient text, just add text-transparent and bg-clip-text.
<div class="text-transparent bg-clip-text bg-gradient-to-r from-cyan-500 to-blue-500">Hello, world!</div>
<div class="text-transparent bg-clip-text bg-gradient-to-r from-sky-500 to-indigo-500">Hello, world!</div>
<div class="text-transparent bg-clip-text bg-gradient-to-r from-violet-500 to-fuchsia-500">Hello, world!</div>
<div class="text-transparent bg-clip-text bg-gradient-to-r from-purple-500 to-pink-500">Hello, world!</div>
Linear gradient background