We have hand-selected several good-looking gradients for you to flash up your designs.
These gradients are included in our Tailwind plugin tailwind-saasblocks. The gradient classes follow Tailwind's kebab-case naming convention:
<div class="bg-gradient-to-r gradient-sky"></div>
<div class="bg-gradient-to-r gradient-cotton-candy"></div>
// and so on...
Pro Tips: try clicking on the gradient circles above.
As you can see, each gradient has 2 versions, light and dark. Thanks to that, no matter whether you're in light or dark mode, the gradients will work as well without you making any changes to your code.
We have a helper class to help you achieve text gradient easier.
a quick brown fox jumps over the lazy dog
With normal Tailwind CSS, you can achieve the above text gradient like so.
<p class="text-transparent bg-clip-text bg-gradient-to-r gradient-sky">a quick brown fox jumps over the lazy dog</p>
Now you can use text-gradient to replace text-transparent bg-clip-text.
<p class="text-gradient bg-gradient-to-r gradient-sky">a quick brown fox jumps over the lazy dog</p>
Well, it's not groundbreaking, but we've found that it's a nice helper as we could never remember exactly what classes to use for text gradient.
We've come up with a few tricks to make SVG and gradients play well with each other. First of all, let's take a look at an example:
import { SparklesIcon as SparklesOutlineIcon } from "@heroicons/react/outline";
import { SparklesIcon as SparklesSolidIcon } from "@heroicons/react/solid";
<div>
<SparklesOutlineIcon className="stroke-gradient gradient-lime" />
<SparklesSolidIcon className="fill-gradient gradient-dusk" />
</div>
We added 2 utility classes: stroke-gradient and fill-gradient.
With an outline icon, we want the gradient in the stroke, hence stroke-gradient; same for solid icon and fill-gradient.
The way this works is we're applying stroke / fill linear gradient value to these SVG icons with these 2 classes. The gradient classes (gradient-lime for example) set the CSS variable for the linear gradient (url(#gradient-lime)) which is used by stroke-gradientorfill-gradient.
In order for this to work, you do need to add the SVG linearGradient definitions to your website.
<svg width="0" height="0">
<defs>
<linearGradient id="gradient-peach">
<stop offset="0%" style="stop-color:var(--gradient-peach-from)"></stop>
<stop offset="100%" style="stop-color:var(--gradient-peach-to)"></stop>
</linearGradient>
<linearGradient id="gradient-sky">
<stop offset="0%" style="stop-color:var(--gradient-sky-from)"></stop>
<stop offset="100%" style="stop-color:var(--gradient-sky-to)"></stop>
</linearGradient>
<linearGradient id="gradient-lime">
<stop offset="0%" style="stop-color:var(--gradient-lime-from)"></stop>
<stop offset="100%" style="stop-color:var(--gradient-lime-to)"></stop>
</linearGradient>
<linearGradient id="gradient-dusk">
<stop offset="0%" style="stop-color:var(--gradient-dusk-from)"></stop>
<stop offset="100%" style="stop-color:var(--gradient-dusk-to)"></stop>
</linearGradient>
<linearGradient id="gradient-cotton-candy">
<stop offset="0%" style="stop-color:var(--gradient-cotton-candy-from)"></stop>
<stop offset="100%" style="stop-color:var(--gradient-cotton-candy-to)"></stop>
</linearGradient>
<linearGradient id="gradient-wild-apple">
<stop offset="0%" style="stop-color:var(--gradient-wild-apple-from)"></stop>
<stop offset="100%" style="stop-color:var(--gradient-wild-apple-to)"></stop>
</linearGradient>
<linearGradient id="gradient-fresh-mint">
<stop offset="0%" style="stop-color:var(--gradient-fresh-mint-from)"></stop>
<stop offset="100%" style="stop-color:var(--gradient-fresh-mint-to)"></stop>
</linearGradient>
<linearGradient id="gradient-grape-gummy">
<stop offset="0%" style="stop-color:var(--gradient-grape-gummy-from)"></stop>
<stop offset="50%" style="stop-color:var(--gradient-grape-gummy-via)"></stop>
<stop offset="100%" style="stop-color:var(--gradient-grape-gummy-to)"></stop>
</linearGradient>
</defs>
</svg>
With this setup, you can now use classes to apply gradients to SVG icon component libraries like Heroicons, Feather, or any other icon set.
For example, with Next.js, here is one way you can add these linear gradient definition to your website:
// @file pages/_document.js
import Document, { Html, Head, Main, NextScript } from "next/document";
export default class MyDocument extends Document {
render() {
return (
<Html>
<Head />
<body className="bg-layer-1 antialiased">
<Main />
<NextScript />
<svg width="0" height="0">
<defs>
<LinearGradient name="peach" />
<LinearGradient name="sky" />
<LinearGradient name="lime" />
<LinearGradient name="dusk" />
<LinearGradient name="cotton-candy" />
<LinearGradient name="wild-apple" />
<LinearGradient name="fresh-mint" />
<LinearGradient name="grape-gummy" withVia />
</defs>
</svg>
</body>
</Html>
);
}
}
function LinearGradient({ name, withVia }) {
return (
<linearGradient id={`gradient-${name}`}>
<stop offset="0%" style={{ stopColor: `var(--gradient-${name}-from)` }} />
{withVia ? (
<stop
offset="50%"
style={{ stopColor: `var(--gradient-${name}-via)` }}
/>
) : null}
<stop offset="100%" style={{ stopColor: `var(--gradient-${name}-to)` }} />
</linearGradient>
);
}
The main limitation of our SVG gradient setup is that you cannot change the direction of the gradient. The way to customize the direction of the gradient is via x1, x2, y1, y2 values in the <linearGradient /> definition. (You can learn more in the Directionality section of this article.)
Since all SVG gradients are pointint to the same linear gradient definition, you cannot change the direction of the gradient of a single SVG. If you want to change the direction for all instances of the gradient, you can modify the linear gradient definition that you setup above.
By default, SaaS Blocks provides 8 gradients as shown above. You can change, add, or remove these gradients from your Tailwind config with our plugin:
// @file tailwind.config.js
const defaultGradients = require("tailwind-saasblocks/gradients/default.gradients");
module.exports = {
plugins: [
require("tailwind-saasblocks")({
gradients: {
...defaultGradients, // remove this if you don't want to use our default gradients
// add your own gradients here
// you can use this gradient with this class: "gradient-my-stuff"
"my-stuff": {
light: {
from: "#fff",
via: "red", // optional
to: "#000",
},
dark: {
from: "#fff",
via: "red", // optional
to: "#000",
},
},
},
}),
],
};