In this post, we will learn to create gradient borders in CSS. We will know how to apply gradient borders in CSS to make the content of a webpage look awesome.
How to create gradient borders in CSS?
Here are the steps that I followed.
- To create a gradient border, I used two <div> elements. The outer div acts as a wrapper element and the inner <div> contains some text.
- I applied the linear gradient to the outer div.
- Some padding to the outer div. The padding acts as a border.
- I applied a color as a background for the inner div. This background color covers the outer div except the padding I applied on the outer div.
Now let’s see the code.
gradient_border.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<title>Gradient border</title>
</head>
<body>
<div class="outer-div">
<div class="inner-div">
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Vero pariatur corporis quaerat voluptatum eos
tempora temporibus nisi voluptates sed, exercitationem
sequi dolore culpa incidunt accusamus,
quasi unde reprehenderit ea molestias.
</div>
</div>
</body>
</html>
Here, you can see, that the outer <div> is just a wrapper for the inner <div> and the inner <div> contains the text. Now let’s see the CSS file.
styles.css
body {
display: grid;
background: #0d0d3a;
height: 100vh;
margin: 0;
place-items: center;
}
.outer-div {
max-width: 300px;
background: linear-gradient(to right, #3bd1df, #dc2e74);
padding: 3px;
}
.inner-div {
color: white;
background: #0d0d3a;
padding: 35px;
}
You can see here that I have applied a linear gradient to the outer div.
Now, let’s see the output.
Output:
DeveloperXon 
Leave a Reply