In this topic, We are going to see how to give the text a border gradient.
Here, given different types of gradient borders of text.
First of all, create an HTML file index.html and add the below HTML structure in your file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>How To Give The Text A Border Gradient</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="main">
<div class="row">
<div class="col-1">
<p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
<div class="row">
<div class="col-2">
<p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
<div class="row">
<div class="col-3">
<p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
<div class="row">
<div class="col-4">
<p class="text text-center">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="row">
<div class="col-5">
<p class="text text-center">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="row row-inner">
<div class="col-inner-1">
<p class="text text-center">Lorem Ipsum is simply dummy text.</p>
</div>
<div class="col-inner-2">
<p class="text text-center">Lorem Ipsum is simply dummy text.</p>
</div>
<div class="col-inner-3">
<p class="text text-center">Lorem Ipsum is simply dummy text.</p>
</div>
<div class="col-inner-4">
<p class="text text-center">Lorem Ipsum is simply dummy text.</p>
</div>
</div>
</div>
</body>
</html>
Then, create a CSS folder and create a style.css file in it.
Then add the below CSS in the style.css file. (Notes: make sure CSS file has been included in HTML main file index.html)
*{
margin: 0;
padding: 0;
}
body {
background: #000;
}
.main {
width: 50%;
margin: 0 auto;
}
.row {
padding: 10px;
}
.text {
color: #FFFFFF;
background: #000;
padding: 20px;
font-size: 18px;
}
.text-center {
text-align: center;
}
.col-1 {
position: relative;
background: linear-gradient(
221.04deg, #F26522 2.41%, #AB47BC 95.16%);
border-radius: 1.5px;
padding: 3px;
}
.col-2 {
border-width: 3px;
border-style: solid;
border-image:
linear-gradient(
to bottom,
#F26522,
rgba(0, 0, 0, 0)
) 1 100%;
}
.col-3 {
border-width: 3px;
border-style: solid;
border-image:
linear-gradient(
to top,
#AB47BC,
rgba(0, 0, 0, 0)
) 1 100%;
}
.col-4 {
border-width: 3px;
border-style: solid;
border-image:
linear-gradient(
to left,
#F26522,
rgba(0, 0, 0, 0)
) 1;
}
.col-5 {
border-width: 3px;
border-style: solid;
border-image:
linear-gradient(
to right,
#AB47BC,
rgba(0, 0, 0, 0)
) 1;
}
.row-inner {
display: flex;
column-gap: 20px;
}
.col-inner-1 {
position: relative;
background: linear-gradient(
221.04deg, #F26522 2.41%, #AB47BC 95.16%);
border-radius: 1.5px;
padding-top: 3px;
}
.col-inner-2 {
position: relative;
background: linear-gradient(
221.04deg, #F26522 2.41%, #AB47BC 95.16%);
border-radius: 1.5px;
padding-bottom: 3px;
}
.col-inner-3 {
border-left: 3px solid;
border-image: linear-gradient(#F26522, #AB47BC) 0 100%;
}
.col-inner-4 {
border-right: 3px solid;
border-image: linear-gradient(#F26522, #AB47BC) 0 100%;
}
Now, you can see the different types of gradient borders.
Output:
For more a Gradient CSS go to some related articles:
Thank You, hope you guys found something useful.
