Today I will be teaching you how to create a simple gradient background text box for your website 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 id="textBox">
<h1>Hello</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim augue non magna tristique faucibus at eget eros.
Ut et est turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut lacus nunc. Aliquam turpis arcu,
convallis sit amet consequat sed, accumsan eget justo. Quisque sed lacus quis velit aliquet pharetra id vel dui. Aenean
vel sagittis diam, at mattis velit. Curabitur venenatis lobortis orci, nec sagittis augue aliquet nec. Curabitur feugiat
risus lacus, eget vestibulum purus tempor eget. Ut at eros tempus, viverra erat ac, eleifend lorem. Aliquam rhoncus, magna
a volutpat bibendum, leo dolor rhoncus sapien, vel pulvinar quam enim nec leo. Proin id urna ut dui cursus feugiat. Etiam
tellus ligula, congue a eros eget, posuere venenatis velit.</p>
</div>
</body>
</html>CSS
*{
padding: 0;
margin: 0;
}
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}
#textBox{
height: 40vh;
width: 30vh;
background: linear-gradient(to right, #ff512f, #f09819);
border-radius: 7%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#textBox h1{
width: 80%;
height: 15%;
text-align: center;
}
#textBox p{
width: 80%;
height: 50%;
overflow: hidden;
text-align: justify;
}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