Create a Gradient Text Effect using HTML and CSS Last Updated : 14 Jul, 2020 Comments Improve Suggest changes Like Article Like Report 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: Comment More infoAdvertise with us Next Article Create a Gradient Text Effect using HTML and CSS nemotivity Follow Improve Article Tags : Web Technologies Web Templates Similar Reads Create a 3D Text Effect using HTML and CSS The 3D text effect is one of the most used text effects in the web design world. As a designer or front-end developer, one should know how to create a 3D text effect. Today we will be looking at one of the simplest and easiest methods to create text in a 3D look with HTML and CSS. ApproachCreate an 2 min read How to Create Engraved Text Effect using HTML and CSS ? The engraved text effect is an effect that you can use in your websites as a heading or a sub-heading to make it look more pleasing and attractive. Approach: The engraved text effect can be easily generated using HTML and CSS. First we will create a basic text using HTML and then by using the CSS te 2 min read How to create linear gradient text using HTML and CSS ? The linear-gradient is used to create eye-catching text effects, particularly suitable for dark-themed websites or applications. This method involves filling text with linear-gradient color codes, making it look attractive and bold. Linear-gradient text effects are ideal for dark themes and provide 2 min read How to Create a Cutout Text using HTML and CSS ? Cutout text is used as a background header of the webpage. The cutout text creates an attractive look on the webpage. To create a cutout text we will use only HTML and CSS. We display the cutout text and then we make the text blending of an element’s background with the element’s parent. The CSS mix 2 min read How to create text-reveal effect using HTML and CSS ? Text-reveal is a type of effect in which all the alphabets of the text are revealed one by one in some animated way. There are uncountable ways to animate text for this effect. It is up to your creativity how you want the text to reveal. We will look at a basic and easy way to get started. Table of 3 min read Create a Glowing text shadow using HTML and CSS To create a glowing text-shadow, we will use HTML to create the structure and CSS for the styling of the text. With the help of CSS, we can add shadows to text. HTML Code: In this section, we will design the basic structure of the code. html <!DOCTYPE html> <html lang="en"> <head> 2 min read How To Create Carved Text Effect using CSS? The carved text effect is also known as the embossed effect as it looks like the text has been embossed on a background. It is also known as Neumorphism in CSS. This effect is used when we want to give our website a clean and refreshing look. The embedded text can be of the same color as the backgro 2 min read How to create reflection effect using HTML and CSS ? The reflection effect is one of the coolest effects that one can use in his/her website. It is a type of informal effect so it is highly recommended not to use it any professional project. You can use it in your personal projects and maybe your portfolio to show your creativity. In this effect, we t 3 min read How to Create Liquid Filling Effect on Text using HTML and CSS ? The liquid fill text animation can be done using CSS | ::before selector. We will use key frames to set height for each frame of animation. Please make sure you know about both CSS | ::before selector and CSS | @keyframes Rule before try this code.The basic styling of the text can be done differentl 3 min read How to create gradient search button using HTML and CSS ? In this article, we will see how to create a gradient search button using HTML & CSS, along with knowing its basic implementation through the examples. The creation of a gradient search button involves the CSS linear-gradient() function, which sets the background color of the button. Here, we ha 4 min read Like