Metallic Bordered Gold Text with CSS

We just took two layers of texts and edited them with CSS. So now they are looks like a 3d text effect as we overlapped them to make Metallic Bordered Gold Text.
Metallic Bordered Gold Text with CSS

Namaste!

Introduction

hey, in this article we are going to share with you “Metallic Bordered Gold Text with CSS”.

We just took two layers of texts and edited them with CSS. So now they are looks like a 3d text effect as we overlapped them to make Metallic Bordered Gold Text.

Metallic Bordered Gold Text with CSS YouTube Tutorial

Metallic Bordered Gold Text with CSS Source Code

.html File Code

Put this code inside <body> Your Code Here </body>

<div class="wrapper">
        <div class="bg">Gold</div>
        <div class="fg">Gold</div>

    </div>

.css File Code

Put this code inside <style> Your Code Here </style> or inside style.css file

* {
    box-sizing: border-box;
}

:root {
    --gold: #ffb338;
    --light-shadow: #77571d;
    --dark-shadow: #3e2904;
}

body {
    margin: 0;
}

.wrapper {
    background: radial-gradient(#272727, #1b1b1b);
    display: grid;
    grid-template-areas: "overlap";
    place-content: center;
    text-transform: uppercase;
    height: 100vh;
}

.wrapper>div {
    background-clip: text;
    -webkit-background-clip: text;
    color: #363833;
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-size: clamp(3em, 18vw, 15rem);
    grid-area: overlap;
    letter-spacing: 1px;
    -webkit-text-stroke: 4px transparent;
}

div.bg {
    background-image: repeating-linear-gradient(105deg, var(--gold)0%, var(--dark-shadow)5%, var(--gold)12%);
    color: transparent;
    filter: drop-shadow(5px 15px 15px black);
    transform: scaleY(1.05);
    transform-origin: top;
}

div.fg {
    background-image: repeating-linear-gradient(5deg, var(--gold)0%, var(--light-shadow)23%, var(--gold)31%);
    color: #1e2127;
    transform: scaleY(1);
    transform-origin: top;
}

Thank You!

Total
0
Shares
Leave a Reply
Previous Post
Creative Text Revealing Animation using HTML CSS

Creative Text Reveal Animation using HTML CSS

Next Post
Dual Color Scrolling Text Effect with HTML CSS

Dual Color Scrolling Text Effect with HTML CSS

Related Posts
Total
0
Share