Metallic Bordered Gold Text with CSS

Namaste!

Table of Contents

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!