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