When we design things for developers, we need to keep in mind how they’re going to be built. Every flourish that looks great in Figma can end up being a pain in the arse to actually build.
Gradients are lovely. I’ve seen some pretty unique ones used in Dribbble snapshots and always wondered how hard it’d be to build them with CSS. So as I’m learning Tailwind I thought it’d be a good chance to try them out.
Fancy gradients in Figma
As part of my work with Vouchsafe I’ve added these gradients into our design system in Figma. You can layer multiple gradients like this to create a multicoloured effect; the lighter gradient has a blue base but fades through to purple and green in different parts.
This light gradient is made up of several gradients laid on top of each other.
Creating these in Figma is simple enough, and building them in CSS isn’t too hard either!
Radial gradients in CSS
With CSS you can set a background to use radial gradients. By default these gradients will fill to the farthest edge and start at the center, and if you define two colours their positions will be set at 0% and 100%.
background-image: radial-gradient(#dff3f6, #a0dbe4); Using extra properites you can move the position of the center of the gradient,
and also change the shape. In the example below I’ve made the shape a squashed
ellipse by setting the height to 80% and the width to 120%. The position of the center is at 0% 0%,
which sets the center to the top left of the container.
background-image: radial-gradient(80% 120% at 0% 0%, #dff3f6, #a0dbe4); CSS will also let you use multiple gradients at once. Like in Figma, the gradients are placed on top of each other in layers. If you set the end colour to transparent you’ll bne able to see the gradients through all of the layers.
background-image: radial-gradient(
80% 120% at -15% -15%,
#dff3f6,
transparent
),
radial-gradient(80% 100% at 120% 50%, #a8b4f6, transparent),
radial-gradient(100% 80% at 30% 100%, #aee9de, transparent),
radial-gradient(#a0dbe4, #e40000); So with some fiddling and moving it’s been easier than I thought to match graident stytles from Figma in CSS! I’m certain this would work with linear gradients too though I haven’t tried it.
This is where I would stop if I was just using CSS classes, but since my team is using Tailwind I still have a little more work to do…
Adding to Tailwind
Although I could use my new gradients as a custom class, we’ve been using
Tailwind at Vouchsafe, so I wanted to add it to the available Tailwind options.
I’ve already worked with tailwind.config to copy our Figma color
variables over, so we can start from there:
There are two things I want to do here:
- Add a gradient background as an option to background image styles
- Use the existing theme colours in the gradient
First item first! Within the config I can extend the theme to include new class
options for background-image, which is how I’ve been defining the
gradient backgrounds. I’ll add this to the Tailwind config under where I’ve
defined the colours.
backgroundImageBlock: {
"gradient-light": "
radial-gradient(80% 120% at -15% -15%, #ff00ff, transparent),
radial-gradient(80% 100% at 120% 50%, #ffff00, transparent),
radial-gradient(100% 80% at 30% 100%, #00ffff, transparent),
radial-gradient(#ff0000, #e40000);
",
},
If I want to use this as a background style using Tailwind classnames I can now
use bg-gradient-light. But this is a bit of an orphan. If I updated
my colour variables I’d need to come back to this definition and update the hex
codes manually.
To prevent this I can reference the theme’s colours variables that I already definied. To do this I can update the backgroundImageBlock code to use the variables:
backgroundImageBlock: ({ theme }) => ({
"gradient-light": `
radial-gradient(80% 120% at -15% -15%, ${theme(`colors.indigo-300`)}, transparent),
radial-gradient(80% 100% at 120% 50%, ${theme(`colors.teal-300`)}, transparent),
radial-gradient(${theme(`colors.green-100`)}, ${theme(`colors.green-200`)});
`,
}),
Now when I update the main colours it’ll come through to this backgroundImageBlock style too.