Introduction
I was doing a design revamp for this blog, and my designer came up with a button that looks like this.
Looks great, right?
I thought to myself, that would be simple enough to make: a button, with a transparent and blur background, and add in a gray-ish gradient border around it. Probably something like border: 1px solid linear-gradient()
would definitely work.
Spoiler: I was wrong
Border Gradient Attempt
So I set my goal, to build a proof of concept.
I whipped out a simple codepen, and created a button with a linear gradient border.
button {
all: unset;
font-family: sans-serif;
font-size: 2rem;
padding: 1rem 2rem;
background: #172554;
color: white;
border: 1px solid linear-gradient(to bottom right, red, orange, yellow, green, blue, indigo, violet);
}
That must be the most colorful gradient known to man. I was confident that it would work.
It must be a dry season because I can’t see any rainbow!
Yeah, turns out linear-gradient does not work with border.
Stacked Element Method
As a seasoned problem solver, I went to google, searched “How to make a gradient border in CSS”, and found an interesting method:
You basically create two divs, first is for the rainbow background, and second one is the button text itself. It sounds like a great idea.
I updated my code using a pseudo element as a background.
button {
all: unset;
position: relative;
font-family: sans-serif;
font-size: 2rem;
padding: 1rem 2rem;
background: #000;
color: white;
/* formula for 2 stacked radius is: (radius - (border-width / 2)) */
border-radius: calc(12px - (2px / 2));
}
button::before {
content: '';
position: absolute;
/* this is the border width */
inset: -2px;
z-index: -1;
background: linear-gradient(
to bottom right,
red,
orange,
yellow,
green,
blue,
indigo,
violet
);
border-radius: 12px;
}
IT WORKS!
The code looks a bit complicated, but it does the job. I was really happy about it.
Adding a transparent background
I continued my work by adding the transparent and blurred background.
button {
background: rgba(0, 0, 0, 0.1);
backdrop-filter: blur(1px);
}
And it looks like this:
Remember that we have a rainbow div behind? Introducing a translucent background means we will see the rainbow.
If you think that maybe we can try making a rainbow background with a hollow transparent background in the middle, that would be called a gradient border 🙃. So we're back to square one.
Ultimate Solution with Mask Exclude
So I did some more digging, and found the perfect solution that can cater all cases.
There’s a new property that’s recently gained a major support across browsers which is mask-composite.
According to CSS Tricks, we can remove a certain part of element by creating mask with 2 elements on top of each other, and use mask-composite exclude.
That means, if we create two boxes with one smaller than the other, we can have a mask that can show anything we like.
With mask, the element's background will be reflected. This even includes background-image.
Final Code
This is how the final code looks like!
button {
all: unset;
position: relative;
font-family: sans-serif;
font-size: 1rem;
padding: 1rem 2rem;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(2px);
color: white;
border-radius: 12px;
}
button::before {
content: '';
position: absolute;
z-index: -1;
inset: 0px;
border-radius: inherit;
/* this is the border width */
padding: 1px;
background: linear-gradient(
to bottom right,
#171717 0%,
#525252 62%,
#171717 100%
);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
Reference: https://stackoverflow.com/a/51496341
Final Words
There you have it! A working set of gradient border with translucent background. With this new widely-supported property, we can create anything that comes to mind.
Including something like this:
ps: I can’t open-source this because it’s from work ✌️. But it's using the same method!
Originally posted on my personal site, find more blog posts and code snippets library I put up for easy access on my site 🚀
Like this post? Subscribe to my newsletter to get notified every time a new post is out!
Top comments (0)