How to create a gradient border in CSS?
You may have used or seen borders on web pages around some images, buttons, or other elements. But today we will take things one level up by learning how to make gradient border in CSS.
Now we will look into three ways to make a gradient border in CSS. So that we can make incredible things with it.
Gradient Border in CSS the use of Padding
So, In this approach, we will use two divs. One div into another div. And will do magic using CSS.
<div class="container">
<div class="box"> </div>
</div>
Code language: HTML, XML (xml)*,
*::before,
*::after {
padding: 0;
margin: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}Code language: CSS (css)So, what we have done so far is,
- In HTML, created a <div> with a class “container” and
then another <div> with class “box” within the
<div> with “container” class. - and in CSS, we set the margin and padding to zero.
And after it centered the <div> using “Flexbox method”.
.container {
height: 300px;
width: 300px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
}
.box {
height: 100%;
width: 100%;
background: #b9d6f2;
border-radius: 10px;
}Code language: CSS (css)- Now we gave height and width of 300px to the <div> with class “container”.
- And applied the “Flex Box method” to center the <div> within it.
- After that, in <div> with class “box”, gave width and height to 100%. So that it can become equal to its parent <div>
- Gave a border radius of 10px for rounded corners.
.container {
padding: 5px;
background: linear-gradient(45deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 15%, rgba(0,212,255,1) 100%);
}Code language: CSS (css)Now here we added the last two styling lines for the <div> with class “container”.
- First, we gave padding of 5px to <div>, which creates a space of 5px between both divs.
- After that, we will give a gradient background to the <div> with the class “container”.
And that’s it, we did it. We created a gradient border. You can find the final codepen here.
This approach is nice but what if you want to make a gradient border around a button?
This method won’t work smoothly. So now we will look to the new method.
Using Border image and Border image slice.
Now you may or may not have heard about these two terms. But still, let’s look briefly at what they are.
Border-image – It allows to use of images as a border of an HTML element. But it’s not limited to images we can add gradient backgrounds too.
To know more in detail you can check out this article on CSS Tricks.
Border-image-slice – this property divides the image given by “border-image”. To know how it calculates and takes argument in-depth you should read here on MDN or this article on codrops.
Now, Let’s continue with this method.
<div class="box">
<button class="btn">SUBMIT</button>
</div>
Code language: HTML, XML (xml)*,
*::before,
*::after {
padding: 0;
margin: 0;
}
.box {
width: 400px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 5px solid #00ff9f;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
}Code language: CSS (css)Let’s see what happened here.
- In HTML, we created a <div> with class “box” and a <button> in it with class “btn”.
- Then centered the <div> using “position absolute” method.
- And created a colored border and made rounded corners.
- To center the <button> in <div>, we used “Flex Box” method.
.btn {
padding: 10px 20px;
border-width: 6px;
border-image: linear-gradient(90deg, darkblue, darkorchid);
border-image-slice: 1;
}Code language: CSS (css)- Now we styled the button
- we gave padding of 10px at the top and bottom, then 20px at the left and right.
- Gave a width of “6px” to the border of the button.
- Here we are giving gradient color in the “border-image”.
- Then passed “1” as a value to border-slice-image.
We can also use just “border-image”.
Here we passed “1” which is the value of “border-image-slice” as an input.
.btn {
padding: 10px 20px;
border-width: 6px;
border-image: linear-gradient(90deg, darkblue, darkorchid) 1;
}Code language: CSS (css)You can check out the complete codepen here.
This approach is good too. There is no need to create an extra element,
CSS took care of it but this is not compatible with the “border-radius” property. This means we cannot make round gradient borders around the <button>.
Let’s explore 3rd approach.
Background Origin and Background Clip with Border Image.
Background Origin – It is a CSS property that sets from where the background will start. It has three types.
- Border-box : means the background starts from the upper left side.
- Padding-box : means the background starts from the upper left corner. With some padding around it, padding comes from the browser.
- Content-Box : means background will occupy an area equal to the content within it.
Check this here on MDN to see a demo of it.
Background Clip – It means how far within an element it can extend. This also contains the same values as Background Origin. Border-box, padding-box and content-box.
Now Let’s get started.
<div class="box">
<button class="btn">Submit</button>
</div>Code language: HTML, XML (xml)*,
*::before,
*::after {
padding: 0;
margin: 0;
}
body {
display: grid;
place-items: center;
height: 100vh;
}
.box {
width: 300px;
height: 300px;
border: solid #833ab4 5px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 12px;
}Code language: CSS (css)So, Now just like previous methods
- In HTML, there is a <div> with class “box” and a <button> in it with class “btn”.
- In CSS, we are centering the <div> using Grid.
- Gave a height and width of 300px.
- Created a solid border of 5px with color #833ab4.
- Then in <div>, we centered the button using the Flex Box method.
It’s time to use Background-origin and Background-Clip.
.btn {
height: 40px;
width: 90px;
font-size: 15px;
border-radius: 25px;
border: solid 5px transparent;
background-image: linear-gradient(white, white),
linear-gradient(90deg, #833ab4, #fd1d1d, #fcb045);
background-origin: border-box;
background-clip: content-box, border-box;
cursor: pointer;
}Code language: CSS (css)- So, now in <button>notice, we gave it a height and width,
not padding, It’s important because when we use background-clip ahead so it won’t concentrate on just the “Submit” word. - Then font-size of “15px” and border-radius of “25px” to make rounded corners of button.
- And a solid border of 5px with a “transparent” property.
- Now, we are going to use linear-gradient two times in the background-image.
firstly we will give a gradient from white to white to keep the background of the button white. - Then, a second-time linear gradient with 3 colors. It will go to the background of the white area of the button.
- We set background-origin to border-box. So, that it will make the button filled with gradient colors.
- and then a background clip with border-box and content-box,
will keep the focus on content that is colored “white” color.
You can check out the completed code pen here.
More Ways
Here we discussed only three ways but other than these there are more ways.
- One is using mask if you understand and are comfortable with using mask in CSS. Then you should read this by Temani Affif.
- Another way is doing is using CSS selectors like : : before. It is shared by SoySudhanshu Codes in this video.
Conclusion
- In this blog, we saw three ways to make a gradient border in CSS.
- The first one is using two divs, one inside another. Which gives a gradient color to the outer div and some solid background colors to the inner div.
- In the Second approach, we used border-image with border-image-slice to make the gradient. But this method is not compatible with a border-radius.
- In the last approach, we used a background-image and background-clip. And it is compatible with border-radius.
Sharing is caring
Did you like what Sunny Shah wrote? Thank them for their work by sharing it on social media.
No comments so far
Curious about this topic? Continue your journey with these coding courses:
