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. ✌️

Discussion (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 Author

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.