Gradient Text/Font FontAwesome Icon Example - CodePen Type

0

M.b.patel June 29, 2021

Gradient Text/Font FontAwesome Icon Example - CodePen Type Text Gradient With Font Awesome

  <!DOCTYPE html>
<html lang="en">

<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>HTML VS CSS</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil+Text:wght@600&display=swap"
        rel="stylesheet">
    <STyle>
        body {
            background: black;
        }

        .rainbow {
            font-family: 'Big Shoulders Stencil Text', cursive;
            font-size: 128px;
            color: transparent;
            background: linear-gradient(270deg, #1e5799, #2ce0bf, #76dd2c, #dba62b, #ff1493, #1e5799);
            animation: rainbow 64s linear infinite;
            background-size: 60% 100%;
            -webkit-background-clip: text;
            text-align: center;
        }

        @keyframes rainbow {
            0% {
                background-position-x: 0;
            }

            to {
                background-position-x: 10240px;
            }
        }
    </STyle>
</head>
<body>
    <p class="rainbow">HTML<BR>V<i class="fab fa-battle-net"></i>S<BR>CSS</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">

<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>HTML VS CSS</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil+Text:wght@600&display=swap"
        rel="stylesheet">
    <STyle>
        body {
            background: black;
        }

        .rainbow {
            font-family: 'Big Shoulders Stencil Text', cursive;
            font-size: 128px;
            color: transparent;
            background: linear-gradient(270deg, #1e5799, #2ce0bf, #76dd2c, #dba62b, #ff1493, #1e5799);
            animation: rainbow 64s linear infinite;
            background-size: 60% 100%;
            -webkit-background-clip: text;
            text-align: center;
        }

        @keyframes rainbow {
            0% {
                background-position-x: 0;
            }

            to {
                background-position-x: 10240px;
            }
        }
    </STyle>
</head>
<body>
    <p class="rainbow">HTML<BR>V<i class="fab fa-battle-net"></i>S<BR>CSS</p>
</body>
</html>

How To Use This Cord

steps

Fast One Copy Html File.
Copy CSS File And Past Head Part Top Fo Html File.
File Save Name.html
Ran Html File
Ready To Use

Solve This Problem

How Do I Make An Icon Gradient?
How Do You Put A Gradient Color On Icons In Css?
How Do You Do A Linear Gradient On Text?
How Do You Add Color To Html Icon?
Image Of Gradient Icons
Gradient Font Awesome Icons
Instagram Icon Gradient Color Code Css
Text Gradient Css
Gradient Font
Gradient Text Css All Browsers
How To Make Gradient Icons
Text Color Gradient Css Generator

Tags

Cordpen css freedownload Github Gradient GradientButton HoverEffects html js SimpleExample Stackoverflow template web-beast.com

Newer
Older

Post a Comment

* Please Don't Spam Here. All the Comments are Reviewed by Admin.