In many websites, you may have seen Golden text with gradient effect. This effect gives the text an elegant look which adds beauty to the overall website. In this tutorial, you will be learning to create an animated gold text with CSS that will surely make your website & UI look premium.
Table of Contents
Different Examples for GOLD Text Effect with CSS
Example 1
First we will create an HTML file. We will create a heading (h1) with data-reading attribute and the code is given below:
HTML
<div>
<h1>CodingIsEasy.com</h1>
</div>
CSS
html {
height: 100%;
}
body {
background: radial-gradient(ellipse at center, #443501 0%,#000000 100%);
height: 100%;
}
div {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
h1 {
background: linear-gradient(to bottom, #cfc09f 22%,#634f2c 24%, #cfc09f 26%, #cfc09f 27%,#ffecb3 40%,#3a2c0f 78%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: #fff;
font-family: 'Playfair Display', serif;
position: relative;
font-size: 10vw;
margin: 0;
font-weight: 400;
}
h1:after {
background: none;
content: attr(data-heading);
left: 0;
top: 0;
z-index: -1;
position: absolute;
text-shadow:
-1px 0 1px #c6bb9f,
0 1px 1px #c6bb9f,
5px 5px 10px rgba(0, 0, 0, 0.4),
-5px -5px 10px rgba(0, 0, 0, 0.4);
}
Demo
See the Pen Untitled by Arpit Mittal (@codingiseasy) on CodePen.
The most important part is the gradient that gives the text a unique golden look. For this, the CSS radial-gradient powerful CSS function is going to help us and allow us to achieve the golden color look.
Example 2
HTML
<span>CodingIsEasy.com</span>
CSS
body{
padding: 0;
margin: 0;
background-color: #0b1826;
}
span{
/* Optional CSS (Used to center align) */
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
/* Actual CSS Starts from here */
font-family: 'Times New Roman',serif;
letter-spacing: 5px;
font-size: 50px;
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;
}
Demo
See the Pen Untitled by Arpit Mittal (@codingiseasy) on CodePen.
Example 3 (with Animation Effect)
HTML
<div class="gold-container">
<h1 class="gold-text" data-text="CodingIsEasy.com">
<span class="gold-text__highlight" data-text="CodingIsEasy.com">CodingIsEasy.com</span>
</h1>
<p class="decoration-text">Any random text to show</p>
</div>
CSS
body {
background: #000000;
}
.gold-container {
position: relative;
display: block;
margin: 0 auto;
max-width: 36rem;
}
.gold-text {
font-family: "Alegreya", serif;
font-style: italic;
font-size: 4rem;
word-spacing: 0.2em;
display: inline-block;
padding: 0;
line-height: 1;
white-space: nowrap;
color: transparent;
background-color: #E8A95B;
background-image: radial-gradient(ellipse farthest-corner at right bottom, white 0%, #F0BB7A 20%, #E8A95B 60%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, white 0%, #F0BB7A 50%, #DE9945 75%, #E8A95B 100%);
background-size: 100% 100%;
background-clip: text;
-webkit-background-clip: text;
margin: 0 0 0.5rem 0;
}
.gold-text:before {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
color: #E8A95B;
z-index: -1;
text-shadow: 0 -1px 0 #f4cc9b, 0 1px 0 #a77334, 0 2px 0 #9b6b30, 0 3px 0 #90632d, 0 4px 0 #7a5426, 0 4px 2px #7a5426, 0 0.075em 0.1em rgba(26, 35, 39, 0.3), 0 0.15em 0.3em rgba(222, 153, 69, 0.2);
}
.gold-text__highlight {
display: inline-block;
position: relative;
z-index: 1;
}
.gold-text__highlight:after {
content: attr(data-text);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 5;
background-image: linear-gradient(100deg, transparent 0%, transparent 6rem, white 11rem, transparent 11.15rem, transparent 15rem, rgba(255, 255, 255, 0.3) 20rem, transparent 25rem, transparent 27rem, rgba(255, 255, 255, 0.6) 32rem, white 33rem, rgba(255, 255, 255, 0.3) 33.15rem, transparent 38rem, transparent 40rem, rgba(255, 255, 255, 0.3) 45rem, transparent 50rem, transparent 100%);
background-clip: text;
background-size: 60rem 100%;
background-repeat: no-repeat;
-webkit-background-clip: text;
-webkit-animation-name: shine;
animation-name: shine;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
.gold-text__highlight:before {
content: attr(data-text);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 10;
color: transparent;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, transparent 35%, transparent 75%, #DE9945 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-animation-name: flash;
animation-name: flash;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
.decoration-text {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
font-size: 1.2rem;
line-height: 1.5;
color: transparent;
background-image: radial-gradient(ellipse at top left, #CFD8DC 0%, rgba(69, 90, 100, 0.75) 75%, transparent 100%);
background-clip: text;
-webkit-background-clip: text;
}
@-webkit-keyframes shine {
0% {
background-position: -50rem 0;
}
25% {
background-position: -50rem 0;
}
100% {
background-position: 30rem 0;
}
}
@keyframes shine {
0% {
background-position: -50rem 0;
}
25% {
background-position: -50rem 0;
}
100% {
background-position: 30rem 0;
}
}
@-webkit-keyframes flash {
0% {
opacity: 1;
}
10% {
opacity: 0;
}
30% {
opacity: 0;
}
40% {
opacity: 1;
}
50% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes flash {
0% {
opacity: 1;
}
10% {
opacity: 0;
}
30% {
opacity: 0;
}
40% {
opacity: 1;
}
50% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Demo
See the Pen Untitled by Arpit Mittal (@codingiseasy) on CodePen.
That’s it for this tutorial. Comment below if you need more such interesting tutorials.