Dual Color Scrolling Text Effect with HTML CSS

Namaste!

Table of Contents

Introduction

hey, in this article we are going to share with you the “Dual Color Scrolling Text Effect”.

We just took two layers of texts and edited them with CSS. used some z-index, some basic CSS keywords, and both layers have their own colors as we make it Light & Dark Mode to make a Dual Color Scrolling Text Effect.

Dual Color Scrolling Text Effect YouTube Tutorial

Dual Color Scrolling Text Effect Source Code

.html File Code

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

<section class="section top-section">
        <div class="content-container content-theme-dark">
            <div class="content-inner">
                <div class="content-center">
                    <h1>Coding</h1>
                    <p>Dual Color Text Effect <a href="#">Coding Hindi</a></p>
                </div>
            </div>
        </div>
    </section>
    <section class="section bottom-section">
        <div class="content-container content-theme-light">
            <div class="content-inner">
                <div class="content-center">
                    <h1>Coding</h1>
                    <p>Dual Color Text Effect <a href="#">Coding Hindi</a></p>
                </div>
            </div>
        </div>
    </section>

.css File Code

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

* {
    margin: 0;
    padding: 0;
    border: none;
}

body {
    font-size: 14px;
    font-family: poppins, sans-serif;
    user-select: none;
}

a {
    text-decoration: none;
}

.section {
    height: 100vh;
    min-height: 500px;
    position: relative;
}

.content-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    clip: rect(auto, auto, auto, auto);
    pointer-events: none;
}

.content-inner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    padding: 0;
    z-index: 99;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
    perspective: 1000;
    -webkit-perspective: 1000;
    pointer-events: all;
}

.content-center {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.top-section {
    background: linear-gradient(135deg, #f4583a 0%, #cd1e38 100%);
}

.bottom-section {
    background: #d4fef2;
}

.section h1 {
    font-size: 200px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

.section p,
.section a {
    font-weight: 700;
    letter-spacing: 7px;
    text-transform: capitalize;
    text-align: center;
}

.content-theme-dark h1 {
    color: #e33e39;
    text-shadow: 0 20px 40px rgb(0, 0, 0, .5)
}

.content-theme-dark p,
.content-theme-dark a {
    color: #fea98a;
}

.content-theme-light h1 {
    color: #062930;
    text-shadow: 0 20px 40px rgb(0, 0, 0, .5)
}

.content-theme-light p,
.content-theme-light a {
    color: #728e93;
}

Thank You!