비전공자 개발일기

Multi Colored Text 본문

HTML _CSS

Multi Colored Text

HiroDaegu 2023. 1. 10. 00:24
728x90
SMALL

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MULTI COLORED TEXT</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <div class="container">
            <h1>Avengers<br>ENDGAME</h1>
        </div>
    </div>
</body>
</html>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --color-1: #186CB8;
    --color-2: #2A9A9F;
    --color-3: #F1B211;
    --color-4: #E83611;
    --color-5: #F9002F;
}

.wrapper {
    background-color: #000;
    line-height: 1;
    display: grid;
    place-items: center;
    min-height: calc(100vh - 16px);
}

h1 {
    font-size: 10vw;
    font-weight: 900;
    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-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.container {
    padding: 1.5rem;
    text-align: center;
    background: radial-gradient(circle at 1.4% 1.4%, var(--color-1) .8%, transparent .8%), 
                radial-gradient(circle at 5.5% 3%, var(--color-2) .45%, transparent .45%),
                radial-gradient(circle at 2.5% 3.5%, var(--color-3) .5%, transparent .5%),
                radial-gradient(circle at 4.5% 1.2%, var(--color-4) .25%, transparent .25%),
                radial-gradient(circle at 98% 98%, var(--color-1) .8%, transparent .8%),
                radial-gradient(circle at 95% 95%, var(--color-2) .45%, transparent .45%),
                radial-gradient(circle at 94.5% 97.5%, var(--color-3) .5%, transparent .5%),
                radial-gradient(circle at 98.5% 95.5%, var(--color-4) .25%, transparent .25%)
    ;
}
728x90
LIST

'HTML _CSS' 카테고리의 다른 글

Skeleton Screen  (0) 2023.01.12
Intro Text Animation  (0) 2023.01.11
Mail Button Micro-Interaction  (0) 2023.01.09
Ring Of Fire  (0) 2023.01.08
Animated Progress Bar  (0) 2023.01.07
'HTML _CSS' Related Articles more