How to create a gradient border

Web Coding
Sep 6, 2020
1 min read

Today I will be teaching you how to add a gradient border around your text using only HTML and CSS

HTML

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <div>
 <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Vestibulum arcu tellus, 
            ultricies sed erat id, ultricies finibus dui. Proin et 
            tortor nec purus suscipit 
            dignissim. Quisque libero felis, placerat non lorem 
            eget, condimentum consequat 
            elit. Nunc placerat ex malesuada eros sollicitudin 
            vulputate. Proin in orci libero.
             Sed a odio quis turpis finibus mollis quis ut tellus.
              Maecenas vitae ipsum sed
            massa tempus euismod. Mauris ut odio commodo, tempus 
            sapien vitae, pellentesque
            sapien. Aliquam sed ornare ex. Aliquam aliquet luctus 
            nibh pellentesque imperdiet.
            Phasellus eleifend sit amet lorem tincidunt vulputate. 
            Nam ornare tortor vitae
            justo bibendum ullamcorper.
 
 </p>
 </div>
</body>
</html>

CSS

body{
 min-height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
 background-color: #202020;
}

div{
 display: flex;
 align-items: center;
 justify-content: center;
 height: 30vh;
 width: 30vh;
 background: linear-gradient( to right, #ee0979, #ff6a00);
}

p{
 height: 92%;
 width: 92%;
 background-color: #202020;
 color: white;
 overflow: hidden;
 text-align: justify;
 font-size: 16px;
 padding: 2%;
}

If you found this blog post helpful don’t forget to check out my other projects and if you want more content follow me on

YouTube: https://www.youtube.com/channel/UC2nxqB2usQIS2c8zwVZKWEQ

Instagram: https://www.instagram.com/coding_for_the_web/

Twitter: https://twitter.com/LearnWebCoding

Comments