Css border gradient | css border gradient using html and css
.png "Css border gradient | css border gradient using html and css")
Css border gradient | css border gradient using html and css
.png "Css border gradient | css border gradient using html and css")
Hello, Welcome to Code with Random Today In this tutorial we are creating CSS BORDER GRADIENT USING HTML AND CSS.
In this to apply gradient to border in they use border image property.It as two colour border.
It make our website acttractive and it is easy to create a gradient border but only you want to follow simple code which is shown in this page.
So…… Let start creating Border Gradient.
here before code you can see Live server how it works….
LIVE SERVER :-
See the Pen CSS Border Gradient by Valerio Radice (@valix85) on CodePen.
HTML CODE:-
In HTML code we want to add basic thing like which type of class you want ,number ,detail etc as show in code. 
<div class="container">
<div class="box">
<div class="content">
<div class="tape"></div>
<h2>01</h2>
<h3>Service One</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat neque nesciunt possimus eveniet eius assumenda ipsa modi distinctio, sunt earum voluptatem inventore in vel odio adipisci explicabo sint quibusdam nisi!</p>
<a href="#">Read more...</a>
</div>
</div>
<div class="box">
<div class="content">
<div class="tape"></div>
<h2>02</h2>
<h3>Service Two</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat neque nesciunt possimus eveniet eius assumenda ipsa modi distinctio, sunt earum voluptatem inventore in vel odio adipisci explicabo sint quibusdam nisi!</p>
<a href="#">Read more...</a>
</div>
</div>
<div class="box">
<div class="content">
<div class="tape"></div>
<h2>03</h2>
<h3>Service Three</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat neque nesciunt possimus eveniet eius assumenda ipsa modi distinctio, sunt earum voluptatem inventore in vel odio adipisci explicabo sint quibusdam nisi!</p>
<a href="#">Read more...</a>
</div>
</div>
<div class="box">
<div class="content">
<div class="tape"></div>
<h2>04</h2>
<h3>Service Four</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat neque nesciunt possimus eveniet eius assumenda ipsa modi distinctio, sunt earum voluptatem inventore in vel odio adipisci explicabo sint quibusdam nisi!</p>
<a href="#">Read more...</a>
</div>
</div>
</div>
HTML OUTPUT:-
CSS CODE:-
In this the border is show in 2 colour and when we move cursor from 1 to 2.From the following example that border created on this div. Then do basic thing in css code like give height,weight, background colour, etc give in css code.
Here we are design the body
@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
body{
font-family: 'Poppins', sans-serif;
margin:0;
padding:0;
display:flex;
justify-content:center;
align-items:center;
min-height: 100vh;
background: #060c21;
color:#FFF;
/*
background: #DEDEDE;
color:#000;
*/
} In this we want to desing container,container box,etc as show in code.
.container{
position: relative;
width:90%;
display:grid;
grid-template-columns: repeat(auto-fill , minmax(20%, 1fr));
grid-template-rows: auto;
grid-gap:0 40px;
}
.container .box {
position:relative;
height:auto;
padding:0px;
background:rgba(255,255,255,0.0);
display:flex;
justify-content:center;
align-items:center;
border: 1px solid #000;
/*
border: 1px solid #DEDEDE;
*/
/*overflow:hidden;*/
}
.box .content {
position:relative;
padding:100px 20px;
background: #060c21;
color:#FFF;
/*
background: #DEDEDE;
colot:#000;
*/
}
.container .box:before {
content:'';
position:absolute;
top:-2px;
left:-2px;
bottom:-2px;
right:-2px;
/*background:rgba(255,255,255,1);*/
background:#FFF;
transform: skew(2deg,2deg);
z-index:-1;
}
.container .box:nth-child(1):before {
background:yellow;
background: linear-gradient(315deg, #ff0057,#e64a19)
}
.container .box:nth-child(1):hover:before {
/*z-index:1;*/ /*example*/
}
.container .box:nth-child(2):before {
background:red;
background: linear-gradient(315deg, #59A600,#008A9C)
}
.container .box:nth-child(2):hover:before {
background: linear-gradient(315deg, #89ff00,#00E2FF)
}
.container .box:nth-child(3):before {
background:lime;
background: linear-gradient(315deg, #e91e63,#5d02ff)
}
.container .box:nth-child(4):before {
background:blue;
background: linear-gradient(315deg, #ff0000,#ffc107)
}
/*.container .box:after{*/
.container .tape{
overflow:hidden;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(255,255,0,0.0);
}
.container .tape:after{
content: '';
position:absolute;
top:0;
left:0;
height:100%;
width:50%;
margin-left:25%;
background: rgba(255,255,255,0.03);
background: rgba(0,0,0,0.1);
pointer-events:none;
transform:skew(41deg);
overflow:hidden;
transition:0.25s; /* 0.5 0.75*/
}
.box:hover .tape:after{
width:100%;
margin-left:0%;
transform:skew(0deg); /*180 0 360 -180 +135 -135*/
}
.box .content h2{
position:absolute;
top:-30px;
right:20px;
margin:0;
padding:0;
font-size:10em;
color:rgba(255,255,255,0.05);
/*color:#000;*/
transition: 0.25s;
}
.box:hover .content h2{
top:-50px;
color:rgba(255,255,255,0.15);
/*color:rgba(0,0,0,0.25);*/
}
.box .content h3{
margin: 0 0 10px;
padding:0;
font-size:24px;
font-weight:bold;
}
.box .content p{
margin:0;
padding:0;
color:#DEDEDE;
/*color:#333;*/
font-size:16px;
}
.box .content a{
position: relative;
margin:20px 0 0 0;
padding:10px 20px;
text-decoration:none;
border: 1px solid #fff;
color: #FFF;
/*color:#333;*/
display:inline-block;
transition: 0.5s;
visibility:hidden;
transform: translateY(10px);
opacity:0;
}
.box:hover .content a{
visibility:visible;
opacity:1;
transform: translateY(0px);
}
.box .content a:hover{
background:rgba(255,255,255,0.95);
color:#222;
/*
color:#DEDEDE;
background:rgba(0,0,0,0.75);
*/
}
CSS OUTPUT:-
Then finally your CSS BORDER GRADIENT BY USING HTML AND CSS is ready. It easy to understand the code and Output is also looking great.
Hope you guys understand and like it.If any doubt comment below in comment box.
Thankyou…..
Written by-Sayali Kharat
