Create a Gradient Text Effect using HTML and CSS
This article will show the approach to add a gradient effect on text using the background-clip CSS property. The final output of text using this effect is shown below. The CSS properties that would be used are flexbox, background-clip, and -webkit-background-clip and the background.
HTML Section: This section contains the HTML markup that will contain the text that has to be styled. The text has been wrapped in a container div as a good practice and to help it center on the page. The class gradient has also been added to the text. Nothing more complicated is needed in this section.
HTML
<!DOCTYPE html><html lang="en"> <head> <title>CSS Text Gradient</title></head> <body> <div class="container"> <h1 class="gradient"> Happy Halloween </h1> </div></body> </html> |
CSS Section: The CSS section would consist of styling the text using the gradient effect. A google font named Metal Mania is used to give it the desired effect. We will first reset everything in the CSS as a good practice. The Google Font to be used would be imported and used next. We will also center everything using flexbox properties.
CSS
<style> @import url("https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap"); * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: "Metal Mania", cursive; } .container { background: #000; height: 100vh; /* Center everything in the page */ display: flex; justify-content: center; align-items: center; }</style> |
Creating the Gradient Effect: We will start making the main gradient effect. The logic is that a linear-gradient background is set for the text. Then the background is clipped to the size of the text. After clipping, the text color is set to transparent.
The inline-block property will make the background to the size of the heading text. The background-clip property with the text value will allow us to clip the linear gradient background up to the text. The -webkit prefix version is used to make it fail-safe. Making the text color transparent will only show the linear-gradient background.
CSS
<style> .gradient { font-size: 5rem; /* Set the background of the text */ background: linear-gradient(to right, #fcc133, #334efc); display: inline-block; /* Clip the background upto the text */ -webkit-background-clip: text; background-clip: text; /* Set the color of the text to transparent */ color: transparent; }</style> |
Complete Code:
HTML
<!DOCTYPE html><html lang="en"> <head> <title>CSS Text Gradient</title> <style> @import url("https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap"); * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: "Metal Mania", cursive; } .container { background: #000; height: 100vh; /* Center everything in the page */ display: flex; justify-content: center; align-items: center; } .gradient { font-size: 5rem; /* Set the background of the text */ background: linear-gradient(to right, #fcc133, #334efc); display: inline-block; /* Clip the background upto the text */ -webkit-background-clip: text; background-clip: text; /* Set the color of the text to transparent */ color: transparent; } </style></head> <body> <div class="container"> <h1 class="gradient"> Happy Halloween </h1> </div></body> </html> |
Output:
Please Login to comment...