To start on how to make a gradient using HTML and CSS, we have to choose between two types:
- Manual CSS
- Using an Online Tool
1. Manual CSS
To use manual CSS to make a gradient, you first need to add some HTML:
This is text with a gradient background behind it
<html>
<head>
<title>Gradient Test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>This is text with a gradient background behind it</p>
</body>
</html>Now, we actually have to add the color.
Open up (or create if you haven’t already) style.css and enter:
body {
background: rgb(2,0,36);
background: linear-gradient(__deg, rgba([r,g,b,a]) _%, rgba([r,g,b,a]) __%, rgba(0,212,255,1) ___%);
}and replace:
background: linear-gradient(__deg, rgba(__) _%, rgba(__) __%, rgba(__) ___%);with this (in order of spaces):
rotation (deg), r,g,b,a, start %, r,g,b,a, middle %, r,g,b,a, end %and then you’re done!
You can see the finished project on this GitHub repo.
2. Using an Online Tool
To use an online tool, search up on whatever search engine you’re using, and type “gradient generator”. I use cssgradient.io but you can use whatever site.
Go through the process and copy the CSS text.
Write body { [put generated CSS here] } and replace the note with the CSS.
Finally, add some HTML to make the website work.
You can see the finished project here.
Thanks for looking at this post; see you soon!
Leave a Reply