Gold Text Effect | CSS Text Effect

Are you bored with the plain and boring text? Then this is the tutorial for you. CSS Text effects allow you to convert your regular text into some eye-catching typography. Today we explore one such text effect.
We use a powerful CSS function called ‘linear-gradient()’ to create a Gold Text Effect. This CSS text effect not only looks super cool but is also easy to create.

HTML:

For HTML code, we just need to add a span element with the text of your choice.

<span>GOLD</span>

CSS:

Styling Body:

We now need to add some styles with CSS. For the document body, I have chosen a dark blue color. For the gold text to stand out make sure to use only a dark background.

body{
   padding: 0;
   margin: 0;
   background-color: #0b1826;
}	

Styling Text:

Next, we style the span element. We begin by centering the text. Here, I have used the Transform Method to center the text. You can choose any font-size and font-family for this effect. Next, we add the linear-gradient function. We control the dark and shiny parts of the text using two factors, Color and color-stop. Before we even start placing the stops or choosing a color, we must add the direction of the gradient. Top to bottom is the default direction. In this case, we set it left to right. We start the gradient with a darker shade of brown with hex code ‘#462523’. The color spreads all the way to the next color stop at ‘22%’. This color transitions into next color with hex code ‘#cb9b51’.

span{
   position: absolute;
   transform: translate(-50%,-50%);
   top: 50%;
   left: 50%;
   font-family: 'Times New Roman',serif;
   letter-spacing: 5px;
   font-size: 150px;
   font-weight: bold;
   background-image: linear-gradient(
	to right,
	#462523 0,
       	#cb9b51 22%, 
	#f6e27a 45%,
	#f6f2c0 50%,
	#f6e27a 55%,
	#cb9b51 78%,
	#462523 100%
	);
   color:transparent;
   -webkit-background-clip:text;

}

All the color and color stops are applied in a similar manner to create a gradient that has darker shades of brown at the very ends. This browns transition into lighter shades of brown moving towards the center of the text. At the center of the text, we apply the lightest shade of brown. This creates an illusion of light reflecting off the text and makes it look shiny. You can go try on experimenting with various shades and color stops here. And Ta-da your CSS Gold text effect is now ready.

I hope you guys enjoyed this tutorial. If you have any suggestions and feedback to let me know through the comments below. Also to stay updated with the latest tutorial subscribe to me on Youtube..