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

Namaste!

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!

Share your love
Neeraj Lamba
Neeraj Lamba
Articles: 39

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.

Website Design Trends in 2022 5 Movies that Programmers Should Watch Best Search Engine for Developers – You.com 06 Free Website Hosting Providers for Developers You should Know Learn Programming while playing games