How to Create Google logo with HTML and CSS ?

The Google logo is a globally recognized symbol of the tech giant, known for its colourful and playful design. It consists of the word "Google" in a unique font, with each letter in a different colour, representing the company's diverse range of products and services. In this article, we will design the Google logo with the help of HTML and CSS.

Approach to create Google Logo:

Create a HTML structure consists of a container <div> with an ID of 'container' and a logo <div> with an ID of 'logo'. Inside the logo <div>, there is a <div> with a class of 'g-line' and four <span> elements with classes of 'red', 'yellow', 'green', and 'blue'.
The CSS file (style.css) contains the styles for the Google logo. The 'g-line' class is used to create the letter 'G' in the logo, and the 'red', 'yellow', 'green', and 'blue' classes are used to create the colors of the logo.
The colors of the logo are created using the 'red', 'yellow', 'green', and 'blue' classes. Each <span> element represents a color, and the background color of each <span> is set to the corresponding color.
The 'g-line' class is used to style the letter 'G' in the logo. It sets the width, height, and background color of the 'G' to create the shape of the letter.
The logo is designed to be responsive and work well on different screen sizes. The CSS styles are applied using relative units such as percentages and ems to ensure that the logo scales appropriately on different devices and screen resolutions.

Example: Implementation to design the logo of Google.

HTML

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

<head>
    <title>Google Logo</title>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="container">
        <div id="logo">
            <div class="g-line"></div>
            <span class="red"></span>
            <span class="yellow"></span>
            <span class="green"></span>
            <span class="blue"></span>
        </div>
    </div>
</body>

</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto');

html,
body {
    background: #f1f1f1;
    margin: 0;
    min-height: 100%;
    font-family: 'Roboto', sans-serif;
}

#container {
    position: relative;
    margin: 50px auto 0;
    width: 1000px;
    height: 300px;
}

#logo {
    position: relative;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    margin: 0 auto;
    overflow: hidden;
    border: 25px solid #f1f1f1;
    box-shadow: 0 0px 4px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.24);
}

#logo::after {
    content: '';
    display: block;
    width: 60%;
    height: 60%;
    border-radius: 50%;
    background: #f1f1f1;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 4;
}

#logo::before {
    content: '';
    display: block;
    width: 35%;
    height: 32%;
    background: #f1f1f1;
    position: absolute;
    right: 0;
    bottom: 50%;
    transform: rotateZ(45deg);
    -webkit-transform: rotateZ(45deg);
    z-index: 10;
}

.g-line,
.yellow,
.green,
.blue,
.red {
    position: absolute;
    z-index: 2;
}

.g-line {
    width: 50%;
    height: 20%;
    background: #0091ea;
    right: 0;
    margin: auto;
    border-bottom-right-radius: 4px 20px;
    top: 0;
    bottom: 0;
    z-index: 15;
}

.yellow {
    width: 40%;
    height: 40%;
    left: -15%;
    bottom: 32%;
    background: #ffc107;
    transform: rotateZ(-48deg);
    -webkit-transform: rotateZ(-48deg);
    z-index: 3;
}

.green {
    width: 100%;
    height: 50%;
    bottom: 0;
    border-radius: 0 0 100% 100%;
    background: #4caf50;
}

.blue {
    width: 35%;
    height: 32%;
    background: #0091ea;
    right: 0;
    top: 50%;
    transform: rotateZ(45deg);
    -webkit-transform: rotateZ(45deg);
}

.red {
    width: 81%;
    height: 50%;
    top: 0;
    background: #f44336;
}

Output:

How to Create Google logo with HTML and CSS ?

Article Tags :

CSS

Web Technologies

Recommended Articles

1. Create GeeksforGeeks logo using HTML and CSS

2. How to align a logo image to center of navigation bar using HTML and CSS ?

3. Instagram Logo/Icon using HTML and CSS

4. How to create GeeksforGeeks logo using p5.js ?

5. How to set logo inside loader using CSS ?

6. How to add icon logo in title bar using HTML ?

7. How to Align navbar logo to the left screen using Bootstrap ?

8. How to change Logo URL Link for any WordPress themes ?

9. How to Add Custom Logo to WordPress Website ?

10. How to Add a Logo to the React Bootstrap Navbar ?

11. Create charts from Google Sheets using Google Apps Script

12. Create a CSS Fireflies background using HTML/CSS

13. How to use Google material icon as list-style in a webpage using HTML and CSS ?

14. Design a Google Chrome Page Template using HTML and CSS

15. Design Animated Google Loader using HTML and CSS

16. How to create a drag and drop feature for reordering the images using HTML CSS and jQueryUI ?

17. How to create X and Y axis flip animation using HTML and CSS ?

18. Create a Data Export and Import using HTML CSS and JavaScript

19. Create a Like and Dislike Toggle using HTML and CSS

20. Create a Product Review and Rating System Using HTML CSS and JavaScript

21. How to create fullscreen search bar using HTML , CSS and JavaScript ?

22. How to create Glowing Star effect using HTML and CSS?

23. Create a Sticky Social Media Bar using HTML and CSS

24. Create a Mobile Toggle Navigation Menu using HTML, CSS and JavaScript

25. Create a Hoverable Side Navigation with HTML, CSS and JavaScript