Design Google & Microsoft Logo Using Pure CSS

 Design Google and Microsoft Logo with CSS

In this article, we are going to learn how to design Google and Microsoft logo with HTML and CSS. We need these logos when we design login, register forms with OAuth sign-in options. But I don't tell you to design Google or Microsoft logo with pure CSS after going through this tutorial. There are so many icon libraries and SVGs out there for you to use whenever you need to put Google or Microsoft logo in your website. Just understand the CSS concepts I mention here and learn what CSS capable of. You can apply the knowledge you get by reading this tutorial to make your websites more beautiful.

Google Logo Design with CSS

Let's start our work with the Google logo. First we need to create a HTML file with basic HTML elements. Then we have to create a single div element with an id. This div is the element we apply CSS styles later to make it looks like the Google logo.

Lets give a width & height to the div element (the logo) and centralize the div element with below CSS styles.

Lets create a square with 4 colors in the Google logo. We are going to create this square by using CSS border property. Then we can use "border-radius" property to make it a circle.

Now we need to do some adjustments for the blue color part of this circle to make it a "G" letter. We can use CSS ::before and after selectors to put some shapes on this borders and make it a real "G" letter. Below code CSS code will do the job.

The styles in the before selector makes a blue color rectangle and the styles in the after selector makes a white color triangle. You can understand how I placed these rectangle and triangle to make the "G" letter of the google logo.

I'm not going through each and every CSS selectors, properties and values in detail. If you are not familiar with these CSS selectors, properties and values, you can refer to W3Schools.com. It's the best way to learn CSS from the very beginning and all the selectors, properties and values which I used in this tutorial, are explained in detailed in W3Schools web site. Here you are the whole code we wrote through this tutorial.

Microsoft Logo Design with CSS

Now you know how to use this CSS border property tricks and CSS ::before, ::after selector tricks. Try to design Microsoft logo alone by yourself. I put the whole code below if you want to refer if you are unable to design it alone as it's your first try.

Hope you learned something new from this article. Try to improve the Google logo also. Please comment below you have any problem about this and comment your ideas also. Thanks for reading! Happy Coding!