Google Logos Created With Only CSS

  • follow us in feedly
Published February 11, 2014 by Brad Knutson
CSS Only Google Logos

I’ve been on a CSS kick lately (if you hadn’t noticed) so I thought I would show you how to recreate some of the common Google logos with just CSS – no images, no javascript.

The CSS below can get pretty advanced, so don’t worry if you get confused. Please feel free to re-purpose the code below for whatever you want to do with it.

Also, before I dive into the code examples, I would like to point out that even Google has moved to a “flat” design standard when it comes to it’s logo. Solid colors, flat, and simple. Just the way I like it!

Google Chrome Logo

The HTML

The CSS

The Result

YouTube Logo

The HTML

The CSS

The Result

Google Docs Logo




The HTML

The CSS

The Result




Gmail Logo




The HTML

The CSS

The Result




Google Drive Logo

The HTML

The CSS

The Result

Google Play Logo

The HTML

The CSS

The Result

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date

Subscribe

Topics

See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">