How to Create Gradient Borders in CSS

In this tutorial you’ll learn how to create a gradient border in CSS.

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
padding: 20px;
}

.box {
height: 200px;
width: 300px;
background-color: cadetblue;
position: relative;
border-radius: 20px;
}

.box::before {
content: '';
border-radius: 25px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
background: linear-gradient(to right, black, greenyellow);
margin: -10px;
}

💻 Premium Courses:

0:00 Solution

#webdevelopment #coding #programming