Multi Color Text Effect with CSS

Namaste!

Table of Contents

Multi Color Text Effect with CSS

In this tutorial, we made a “Multi Color Text with CSS” effect. nowadays CSS effects are on trend, I have created this.

You can Download the Source From Below.

Multi Color Text Effect with CSS YouTube Tutorial

Multi Color Text Effect with CSS

Multi Color Text Effect with CSS Source Code

.html file code

<div class="wrapper">
        <div class="container">
            <h1>
                Multi Color Text CSS ANIMATION
            </h1>
        </div>
    </div>

.css file code

* {
    box-sizing: border-box;
}

:root {
    --color-1: #186cb8;
    --color-2: #2a9a9f;
    --color-3: #f1b211;
    --color-4: #e83611;
    --color-5: #f9002f;
}

.wrapper {
    line-height: 1;
    display: grid;
    background: #000;
    min-height: 100%;
    place-items: center;
    min-height: 100vh;
}

h1 {
    font-family: poppins, sans-serif;
    font-size: 15vw;
    font-weight: 700;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    margin: auto;
    text-transform: uppercase;
    background: linear-gradient( 219deg, var(--color-1)19%, transparent 19%, transparent 20%, var(--color-2) 20%, var(--color-2) 39%, transparent 39%, transparent 40%, var(--color-3) 40%, var(--color-3)59%, transparent 59%, transparent 60%, var(--color-4) 60%, var(--color-4) 79%, transparent 79%, transparent 80%, var(--color-5)80%);
    background-color: text;
    color: transparent;
}

.container {
    padding: 1.5rem;
    text-align: center;
}

Thank You!