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.

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!

Share your love
Neeraj Lamba
Neeraj Lamba
Articles: 62

Leave a Reply

Your email address will not be published. Required fields are marked *

I'm not a robot *Time limit exceeded. Please complete the captcha once again.