Video Tutorial:
If you prefer to code along to a video tutorial rather than reading this blog post, check out this tutorial here down below. For more such tips, tricks and tutorials subscribe to my youtube channel. Along with tutorials, I also post multiple-choice questions based on HTML, CSS and Javascript.
Project Folder Structure:
Before we start coding, let us create the project folder structure. The project folder is called – ‘Rainbow Text Shadow’. Inside this folder, we have two files. These files are – index.html and style.css. The first file is the HTML document and, the other one is the CSS stylesheet.
HTML:
We start with the HTML code. The HTML code consists of a single h1 element. We use the text ‘Rainbow ‘ inside it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Rainbow Text Shadow</title>
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Rainbow</h1>
</body>
</html>
CSS:
Now we need to style this h1 element. Along with that, we also want to incorporate the hover effect. For that we use CSS.
We start by removing margins and paddings from all the elements. Followed by this we set the box-sizing of all the elements to ‘border-box’.
For the body element, we set the ‘background-color’ to ‘#000000’. Next we style the h1 by setting its color to white and font-family to ‘Poppins’. We even set the font size to 14vw and center the text using the transforms. Finally, we add a transition of 1s to the text-shadow.
We use the hover selector to apply a rainbow coloured text shadow to the text when the mouse hovers over it. To achieve this effect, we use multiple text shadows with different colours. Each of these shadows is set a bit lower than the previous one. This gives a stacked effect to the shadow.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #000000;
}
h1 {
color: #ffffff;
font-family: "Poppins", sans-serif;
text-transform: uppercase;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
font-size: 14vw;
letter-spacing: 0.2em;
cursor: pointer;
transition: text-shadow 1s;
}
h1:hover {
text-shadow: 0.04em 0.04em #fc0049, 0.08em 0.08em #fe8f01,
0.12em 0.12em #fdf21f, 0.16em 0.16em #3fdf4b, 0.2em 0.2em #3462fe;
}
Our rainbow text-shadow is now ready. If you have any issues while creating this code, you can download the source code by clicking on the download button below. Also drop your queries, suggestions and feedback in the comments below.
Happy Coding!
