Linear Gradient Border Using CSS - Coderzadda

Linear gradient borders


We are using linear-gradient in css from very long time but many of you had thought about it that how can we make linear gradient borders using css. I had too questioned it with myself at beginning of my css course and after researching alot, I got my answer which today i am going to share with you guys. So without wasting time let's get started and Know that how can we make lineargradient borders by just using pure css.

I had divided process to make a pure css gradient border in 3 steps which are mentioned below just go through it buddy.

Step 1

First of all we will make a markup or a simple structure to try our experiment (making gradient borders). Markup could be at your choice or way you want. we are using this simple HTML code -

<div class="box" >

<p> 👨‍💻 | Let's make gradient borders </p>

</div>

Step 2

Now we have a markup code ready so we need to do now a main thing guess what is it! Its styling 😃 we will use css to style our HTML markup code. 

body{

/*Just added a background image to body to look good*/

background-image:url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSXIY_CBTQJoP3V4i3FC2_aOy1be4yQosqCZg&usqp=CAU");

}

.box{

/*mentioned a width and height*/

width:300px;

height:300px;

/*added white background to div*/

background:#fff;

/*Aligned div center using CSS Flex Box*/

display:flex;

align-items:center;

justify-content:center;

}

Step 3

After creating markup code and styling it finally it comes to make gradient borders so here i am creating a gradient border around my div whose class is box. Final CSS code is below - 

body{

/*Just added a background image to body to look good*/

background-image:url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSXIY_CBTQJoP3V4i3FC2_aOy1be4yQosqCZg&usqp=CAU");

}

.box{

/*mentioned a width and height*/

width:300px;

height:300px;

/*added white background to div*/

background:#fff;

/*Aligned div center using CSS Flex Box*/

display:flex;

align-items:center;

justify-content:center;

/*Gradient Borders*/

border-image-source: linear-gradient(57deg, #71b280, #134e5e);

border-image-slice: 1;

border: 6px solid; /*border: width type;*/

}

Hurray! Your Gradient Border is ready. 


Explanation

You have noticed that we have used three CSS properties but here only two css properties are mainly responsible to make gradient borders which are border-image-source and border-image-slice. 

Here first css property which we have used is border-image-source which specifies source of our image it could be vector, url to any image, SVG or data URI.

Second property we have used is border-image-slice property specifies that how to slice the image specified by border-image-source and after experimenting with these properties you'll find the slicing on such gradients is much simpler and a simple value of 1 will do.

Hope you had understood how to make a linear-gradient border using pure css. If you want to get similar helpful and informative articles please bookmark our website and share our helpful articles with your developers and designers friends too, By the way you can comment down your reactions about this post below in our comments section. 

Comments

Popular posts from this blog

👨‍💻 | How To Create Typewriter Effect Using Pure CSS

How To Shutdown PC using Python

4 Most Easiest Programming Languages For Beginners | With My Experience & Suggestions