DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for google logo with just html & css
rs9110
rs9110

Posted on

CSS Logo google logo with just html & css

So, here's how to create the Google logo with just HTML and CSS.

First, place a div in your html with an id of google.

<div id="google"></div>
Enter fullscreen mode Exit fullscreen mode

Then, hop into css and input the following code.

#google {
  position: relative;
  border-top: 100px solid #EA4335;
  border-right: 100px solid #4285F4;
  border-bottom: 100px solid #34A853;
  border-left: 100px solid #FBBC05;
  border-radius: 50%;
  background-color: #FFFFFF;
  width: 300px;
  height: 300px;
  padding: 0;
  margin: 10vh auto 0;
}
Enter fullscreen mode Exit fullscreen mode

That should leave you with a circle that has 4 of the Google's color. To turn that into a 'G', input the code below.

#google::before {
  content: "";
  z-index: 100;
  position: absolute;
  top: 50%;
  right: -95px;
  transform: translateY(-50%);
  width: 245px;
  height: 100px;
  background: #4285F4;
}

#google::after {
  content: "";
  z-index: 101;
  position: absolute;
  border-top: 200px solid transparent;
  border-right: 200px solid #FFFFFF;
  top: -100px;
  right: -100px;
  width: 0;
  height: 0;
}
Enter fullscreen mode Exit fullscreen mode

Voila, you just created the Google logo using only HTML and CSS. ✌️

Top comments (16)

Collapse
 
link2twenty profile image
Andrew Bone

A little tip for future posts, you can embed a demo of your code by writing it somewhere like JSFiddle and then embedding it like so

{% jsfiddle https://jsfiddle.net/link2twenty/bxL16fum/ result css html %}

Collapse
 
srezas profile image
SeyedReza SeyedMohseni

may you please also implement its animation?

Collapse
 
rkdme profile image
Rafal Kolodziej

interesting approach.

btw. there is missing colon in margin 10vh auto 0; for #google rule

Collapse
 
rs9110 profile image
rs9110

ah yes, thanks for pointing that out.

Collapse
 
olalani profile image
Olalani Oluwaseun

Have tried it out ☺️ viewing G but not animating like your post gif

Collapse
 
srezas profile image
SeyedReza SeyedMohseni

click bate :))

Collapse
 
olalani profile image
Olalani Oluwaseun

How ???

Collapse
 
ashraful profile image
Mohamad Ashraful Islam

That's creative

Collapse
 
ashishmohanty profile image
Ashish Mohanty

Thanks alot

Collapse
 
srezas profile image
SeyedReza SeyedMohseni

nice. this page on Instagram should mention your article
dev.to/rs9110/google-logo-with-jus...

Collapse
 
kpeale profile image
Kpeale Legbara

I am going to try this outπŸ”₯πŸ”₯

Collapse
 
robertkameni profile image
Robert Kameni

Magnifique πŸ”₯πŸ”₯πŸ”₯

Collapse
 
mathiasfx profile image
Mathias Pereira

amazing

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ

Looks quite different to the real logo. Needs some work

Collapse
 
link2twenty profile image
Andrew Bone

If you want it to be exact you'll have to do something like:

<svg height="500px" width="500px" viewBox="0 0 533.5 544.3" xmlns="http://www.w3.org/2000/svg">
  <path d="M533.5 278.4c0-18.5-1.5-37.1-4.7-55.3H272.1v104.8h147c-6.1 33.8-25.7 63.7-54.4 82.7v68h87.7c51.5-47.4 81.1-117.4 81.1-200.2z" fill="#4285f4" />
  <path d="M272.1 544.3c73.4 0 135.3-24.1 180.4-65.7l-87.7-68c-24.4 16.6-55.9 26-92.6 26-71 0-131.2-47.9-152.8-112.3H28.9v70.1c46.2 91.9 140.3 149.9 243.2 149.9z" fill="#34a853" />
  <path d="M119.3 324.3c-11.4-33.8-11.4-70.4 0-104.2V150H28.9c-38.6 76.9-38.6 167.5 0 244.4l90.4-70.1z" fill="#fbbc04" />
  <path d="M272.1 107.7c38.8-.6 76.3 14 104.4 40.8l77.7-77.7C405 24.6 339.7-.8 272.1 0 169.2 0 75.1 58 28.9 150l90.4 70.1c21.5-64.5 81.8-112.4 152.8-112.4z" fill="#ea4335" />
</svg>

I think Rosis did a good job considering he was just using borders and pseudo elements.

Top Heroku Alternatives (For Free)

>> Check out this classic DEV post <<