DEV Community

Rutvik Patel
Rutvik Patel

Posted on • Updated on • Originally published at Medium

Google Logo Using CSS Only

Google Logo Using CSS Only

In this blog, we are going to learn “How to Create the Google Logo Using CSS Only.”

Created By [Rutik Patel](https://youtu.be/N5racZCWCoY)

 

Points to be discussed

  • Preview

  • YouTube Tutorial

  • HTML Code

  • CSS Code

  • References

 

Preview :

A live demo of the website can be viewed by clicking here.

 

YouTube Tutorial :

 

HTML CODE :

index.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>Google Logo using Conic Gradient</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@500&display=swap" rel="stylesheet">
</head>

<body>
    <div class="container">
        <h2> Google Logo Using CSS Only</h2>
        <div class="box">
            <h1>G</h1>
        </div>
    </div>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

 

CSS CODE :

style.css

* {
    margin: 0;
    padding: 0;
}

.container {
    text-align: center;
}

.container h2 {
    margin: 15px 0px;
}

.container .box {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Kumbh Sans', sans-serif;
}

.box h1 {
    width: 400px;
    height: 400px;
    font-size: 30em;
    background-image: conic-gradient(from -20deg at 38% 59%, #DB4437 0deg, #DB4437 90deg, #4285F4 90deg, #4285F4 180deg, #0F9D58 180deg, #0F9D58 270deg, #F4B400 270deg, #F4B400 360deg);
    padding-top: 9px;
    padding-bottom: 81px;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

Enter fullscreen mode Exit fullscreen mode

 

References :

Google Fonts: https://fonts.google.com/specimen/Kumbh+Sans

GitHub Repository: https://github.com/rutikkpatel/HTML-CSS/tree/main/CSS%20Gradient/Google_Logo

Top comments (0)