Create Gold Text Effect Using HTML And CSS

Create Gold Text Effect Using HTML And CSS

In this article, we are going to see a text effect that is used to make a paragraph attractive and give a different look. In this project, we will define a paragraph and add a gold text effect to it.

Using the scripting language HTML & CSS. Here you will see how the defined content is aligned and padded so that it has a fixed position and doesn’t get messy.  CSS Text effects allow you to convert your regular text into some eye-catching typography. Today we explore one such text effect.

Hello Coders!!! Welcome to Codewithrandom Today we’ll Create Gold Text Effect Using HTML And CSS.

I hope you have got an idea about the project.

HTML Code for Golden Effect

<div id="body">
  <p>
    <small>
      Scrolling gold effect. Please scroll up and down.
    </small>
    <br />&nbsp;
  </p>
  <h1 class="gold">Gold</h1>
  <p><strong class="gold">Gold</strong> is a chemical element with the symbol <strong class="gold"><code>Au</code></strong> (from Latin: aurum) and atomic number 79, making it one of the higher atomic number elements that occur naturally. In a pure form, it is a bright, <strong class="gold">slightly reddish yellow</strong>, dense, soft, malleable, and ductile metal.</p>
  <hr />
  <h2 class="gold">Gold Medal</h2>
  <p>A <strong class="gold">gold medal</strong> is a medal awarded for highest achievement in a non-military field. Its name derives from the use of at least a fraction of <strong class="gold">gold</strong> in form of plating or alloying in its manufacture. </p>
</div>

In this HTML Code, we have defined the structure in which we have written a paragraph because in this project the focus will be on adding effects to text. So we have just created a text and the use of a strong tag indicates that a particular world sentence or word is important just like the bold function does. Let us style the project using CSS.

50+ Html ,Css & Javascript Projects With Source Code

CSS Code for Golden Effect

h1, h2, h3, h4, h5 {
  font-family: 'Jost', Futura, sans-serif;
  margin: 0 0 1rem 0;
}

h1 {
  font-size: 3rem;
  line-height: 125%;
}

hr {
  margin: 2rem 0;
  border: none;
  border-top: black 1px solid;
}

p {
  margin: 1rem 0;
}

html,
body {
  margin: 0;
  width: 100%;
  min-height: 100%;
  background: indigo;
  color: white;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6rem 0;
  font-size: 22px;
  font-family: sans-serif;
  line-height: 150%;
}

#body {
  width: 100%;
  max-width: 400px;
}

.gold {
  display: block;
  background: repeating-linear-gradient(135deg, rgb(255, 221, 155) 0, rgb(254, 215, 146) 20px, rgb(255, 225, 172) 40px, rgb(255, 255, 255) 70px, rgb(250, 198, 107) 125px, rgb(246, 194, 107) 160px, rgb(231, 177, 85) 175px, rgb(244, 193, 107) 185px, rgb(241, 191, 107) 220px, rgb(243, 190, 102) 235px, rgb(233, 177, 83) 250px, rgb(245, 190, 97) 280px, rgb(249, 188, 86) 305px, rgb(255, 251, 245) 385px, rgb(252, 195, 98) 415px, rgb(252, 195, 121) 450px, rgb(255, 221, 155) 500px);
  background-clip: text;
  -webkit-background-clip: text;
  background-repeat: repeat;
  background-attachment: fixed;
  backface-visibility: none;
  color: rgb(255, 221, 155);
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 1px #000);
}

In this CSS Code, we have styled the body with the required syntax such as setting the display, height of the line, font size, font family, etc. In the first line, you can see that we have called all the heading tags and under that wrote the syntax to style this will be very helpful as it shows simplicity and reduces the lines of codes.

Then we defined the name gold in the HTML code we have called it and in every statement where it is used, we have given an RGB(red, blue, green) value which defines how much shade should be given from each color. Let us see the final output.

Final Output Of Gold Text Effect Using HTML And CSS

We have successfully created our Create Gold Text Effect Using HTML And CSS You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned above.

How to make Heartbeat Animation using HTML and CSS Code?

If you find out this Blog helpful, then make sure to search codewithrandom on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Thank You For Visiting!!!

Written By – Harsh Sawant

Code By – @harshh9