{"id":10962,"date":"2020-01-10T21:11:33","date_gmt":"2020-01-10T13:11:33","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=10962"},"modified":"2022-07-15T17:06:23","modified_gmt":"2022-07-15T09:06:23","slug":"gmail-logo-css3","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/gmail-logo-css3\/","title":{"rendered":"How to Create Gmail logo with CSS3"},"content":{"rendered":"<p>A while ago I showed you how to create <a href=\"https:\/\/www.hongkiat.com\/blog\/rss-feed-logo-with-css3\/\">RSS feed logo  with CSS3<\/a>. I figured it\u2019d be fun creating something a little bit more complex. In today\u2019s post, I\u2019m going to show you how to create not one, but two variations of Gmail logo using just CSS3.<\/p>\n<p><strong>Shortcuts to:<\/strong><\/p>\n<ul>\n<li><a href=\"#logo1\">Gmail logo CSS tutorial #1<\/a> | <a target=\"_blank\" href=\"https:\/\/assets.hongkiat.com\/uploads\/gmail-logo-css3\/gmail-logo-1.html\" rel=\"noopener noreferrer\">Preview<\/a><\/li>\n<li><a href=\"#logo2\">Gmail logo CSS tutorial #2<\/a> | <a target=\"_blank\" href=\"https:\/\/assets.hongkiat.com\/uploads\/gmail-logo-css3\/gmail-logo-2.html\" rel=\"noopener noreferrer\">Preview<\/a><\/li>\n<\/ul>\n<p><!--more--><\/p>\n<h2><a name=\"logo1\"><\/a>Gmail logo #1<\/h2>\n<p>This first logo is simple, and fairly easy to created. Without further ado, here are the steps. Let\u2019s start with firing up your favourite code editor and enter the following HTML codes, and save it as <em>logo-gmail.html<\/em>.<\/p>\n<pre>\r\n&lt;html&gt;\r\n\t&lt;head&gt;\r\n\t\t&lt;title&gt;Gmail CSS Logo&lt;\/title&gt;\r\n\t\t&lt;style type='text\/css'&gt;\r\n\r\n\t\t&lt;\/style&gt;\r\n\t&lt;\/head&gt;\r\n\t&lt;body&gt;\r\n\t\t&lt;span class='gmail-logo'&gt;\r\n\t\t\t&lt;span class='gmail-box'&gt;&nbsp;&lt;\/span&gt;\r\n\t\t&lt;\/span&gt;&lt;!-- End .gmail-logo --&gt;\r\n\t&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>Add the following CSS styles between <code>&lt;style&gt;&lt;\/style&gt;<\/code> to reset default CSS values.<\/p>\n<pre>.gmail-logo,\r\n.gmail-logo *,\r\n.gmail-logo *:before,\r\n.gmail-logo *:after {\r\n\tmargin:0;\r\n\tpadding:0;\r\n\tbackground:transparent;\r\n\tborder:0;\r\n\toutline:0;\r\n\tdisplay:block;\r\n\tfont:normal normal 0\/0 serif;\r\n\t}<\/pre>\n<p>The following CSS codes give us the Gmail logo\u2019s red background and a rounded sides.<\/p>\n<pre>\r\n.gmail-logo {\r\n\tmargin:110px auto;\r\n\tbackground:rgb(201, 44, 25);\r\n\twidth:600px;\r\n\theight:400px;\r\n\tborder-top:4px solid rgb(201, 44, 25);\r\n\tborder-bottom:4px solid rgb(201, 44, 25);\r\n\tborder-radius:10px;\r\n\t-moz-border-radius:10px;\r\n\t-webkit-border-radius:10px;\r\n\t}<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/gmail-logo-css3\/1.4-gmail-wrap.jpg\" alt=\"gmail logo in css\" width=\"250\" height=\"192\"><\/figure>\n<p id=\"Step-2.3-gmail-box\">Then, we proceed creating the white box within the red background.<\/p>\n<pre>\r\n.gmail-logo .gmail-box {\r\n\toverflow:hidden;\r\n\tfloat:left;\r\n\twidth:440px;\r\n\theight:400px;\r\n\tmargin:0 0 0 80px;\r\n\tbackground:white;\r\n\tborder-radius:5px;\r\n\t-moz-border-radius:5px;\r\n\t-webkit-border-radius:5px;\r\n\t}<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/gmail-logo-css3\/1.5-gmail-box.jpg\" alt=\"gmail logo in css\" width=\"250\" height=\"145\"><\/figure>\n<p id=\"Step-2.4-gmail-box:before\">In order to create the red \"M\" effect, we\u2019ll first create a box with red border.<\/p>\n<pre>\r\n.gmail-logo .gmail-box:before {\r\n\tposition:relative;\r\n\tcontent:'';\r\n\tz-index:1;\r\n\tbackground:white;\r\n\tfloat:left;\r\n\twidth:320px;\r\n\theight:320px;\r\n\tborder:100px solid rgb(201, 44, 25);\r\n\tmargin:-310px 0 0 -40px;\r\n\tborder-radius:10px;\r\n\t-moz-border-radius:10px;\r\n\t-webkit-border-radius:10px;\r\n\t-moz-transform:rotate(45deg);\r\n\t-webkit-transform:rotate(45deg);\r\n\t-o-transform:rotate(45deg);\r\n\t}<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/gmail-logo-css3\/1.6-gmail-box-before.jpg\" alt=\"gmail logo in css\" width=\"250\" height=\"237\"><\/figure>\n<p id=\"Step-2.5-hidden\">Then we proceed hiding the excessive sides, giving us a complete \"M\" in red color.<\/p>\n<pre>\r\n.gmail-logo .gmail-box {\r\n\toverflow:hidden;\r\n\t}<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/gmail-logo-css3\/1.7-hidden.jpg\" alt=\"gmail logo in css\" width=\"250\" height=\"279\"><\/figure>\n<p id=\"Step-2.6-gmail-box:after\">Now, let\u2019s give two thin red border, giving it the envelope look.<\/p>\n<pre>\r\n.gmail-logo .gmail-box:after {\r\n\tcontent:'';\r\n\tfloat:left;\r\n\twidth:360px;\r\n\theight:360px;\r\n\tborder:2px solid rgb(201, 44, 25);\r\n\tmargin:10px 0 0 40px;\r\n\t-o-transform:rotate(45deg);\r\n\t-webkit-transform:rotate(45deg);\r\n\t-moz-transform:rotate(45deg);\r\n\t}<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/gmail-logo-css3\/1.8-gmail-box-after.jpg\" alt=\"gmail logo in css\" width=\"250\" height=\"242\"><\/figure>\n<p id=\"Step-2.7-gradient\">We are almost done. Let\u2019s add some gradient to the red envelope.<\/p>\n<pre>\r\n.gmail-logo:after {\r\n\tcontent:'';\r\n\tposition:relative;\r\n\tz-index:2;\r\n\tcontent:'';\r\n\tfloat:left;\r\n\tmargin-top:-404px;\r\n\twidth:600px;\r\n\theight:408px;\r\n\tdisplay:block;\r\n\tbackground:\r\n\t\t-moz-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, \r\n\t\t\/* rgba(255, 255, 255, 0.3) 30%, *\/\r\n\t\trgba(255, 255, 255, 0.1) 100%);\r\n\tbackground:-o-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, \r\n\t\t\/* rgba(255, 255, 255, 0.2) 30%, *\/\r\n\t\trgba(255, 255, 255, 0.1) 100%);\r\n\tbackground:-webkit-gradient(\r\n\t\tlinear, left top, left bottom, color-stop(0%, \r\n\t\trgba(255, 255, 255, 0.3)), \r\n\t\t\/* color-stop(30%, rgba(255, 255, 255, 0.2)), *\/\r\n\t\tcolor-stop(100%, rgba(255, 255, 255, 0.1)));\r\n\t}\r\n<\/pre>\n<p id=\"Step-2.8-hover-effect\">Last but not least, let\u2019s give it a different color upon hovered. Add the following HTML DOCTYPE before <code>&lt;html&gt;<\/code><\/p>\n<pre>\r\n&lt;!DOCTYPE HTML PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Strict\/\/EN\" \"https:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-strict.dtd\"&gt;\r\n<\/pre>\n<p>And the following CSS styles before <code>&lt;\/style&gt;<\/code><\/p>\n<pre>\r\n.gmail-logo:hover {\r\n\tbackground:#313131;\r\n\tborder-color:#313131;\r\n\t\/* cursor:pointer; *\/\r\n\t}\r\n.gmail-logo:hover .gmail-box:before {\r\n\tborder-color:#313131;\r\n\t}\r\n.gmail-logo:hover .gmail-box:after {\r\n\tborder-color:#313131;\r\n\tborder-bottom-color:#fff;\r\n\tborder-right-color:#fff;\r\n\t}<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/gmail-logo-css3\/1.9-hover.jpg\" alt=\"gmail logo in css\" width=\"250\" height=\"378\"><\/figure>\n<p><a target=\"_blank\" href=\"https:\/\/assets.hongkiat.com\/uploads\/gmail-logo-css3\/gmail-logo-1.html\" rel=\"noopener noreferrer\">Preview<\/a> | <a href=\"https:\/\/assets.hongkiat.com\/uploads\/gmail-logo-css3\/gmail-logo-1.zip\">Download source file<\/a><\/p>\n<h2><a name=\"logo2\"><\/a>Gmail logo #2<\/h2>\n<p>Next, we\u2019ll create Gmail logo from another perspective with a little 3D effect. We\u2019ll start with the basic HTML markup.<\/p>\n<pre>\r\n&lt;html&gt;\r\n\t&lt;head&gt;\r\n\t\t&lt;title&gt;Gmail logo 2 &lt;\/title&gt;\r\n\t\t&lt;style type=\"text\/css\"&gt;\r\n\r\n\t\t&lt;\/style&gt;\r\n\t&lt;\/head&gt;\r\n\t&lt;body&gt;\r\n\t\t&lt;span id='gmail-logo2'&gt;\r\n\t\t\t&lt;span class='element1'&gt;&nbsp;&lt;\/span&gt;\r\n\t\t\t&lt;span class='element2'&gt;&nbsp;&lt;\/span&gt;\r\n\t\t\t&lt;span class='element3'&gt;&nbsp;&lt;\/span&gt;\r\n\t\t\t&lt;span class='element4'&gt;&nbsp;&lt;\/span&gt;\r\n\t\t\t&lt;span class='element5'&gt;&nbsp;&lt;\/span&gt;\r\n\t\t&lt;\/span&gt;\r\n\t&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>Since the logo has a different perspective, we\u2019ll start by rotating it a little and create the layers needed (which we\u2019ll call them <em>elements<\/em>) in sequence.<\/p>\n<pre>\r\n#gmail-logo2 {\r\n\tmargin:0 auto;\r\n\tdisplay:block;\r\n\twidth:380px;\r\n\theight:290px;\r\n\t-moz-transform:rotate(6deg);\r\n\t-webkit-transform:rotate(6deg);\r\n\t-o-transform:rotate(6deg);\r\n\ttransform:rotate(6deg);\r\n\t}\r\n#gmail-logo2 .element1 {\r\n\tdisplay:block;\r\n\twidth:380px;\r\n\theight:290px;\r\n\t}\r\n#gmail-logo2 .element2,\r\n#gmail-logo2 .element3,\r\n#gmail-logo2 .element4,\r\n#gmail-logo2 .element5  {\r\n\tfloat:left;\r\n\tdisplay:block;\r\n\twidth:380px;\r\n\theight:290px;\r\n\tmargin:-290px 0 0 0;\r\n\t}\r\n<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/gmail-logo-css3\/2.1.elements-position.jpg\" alt=\"gmail logo in css\" width=\"250\" height=\"272\"><\/figure>\n<p id=\"Step-2.2-.element1::before\">Styling <code>.element1::before<\/code><\/p>\n<pre>\r\n#gmail-logo2 .element1::before {\r\n\tcontent:'';\r\n\tposition:relative;\r\n\tmargin:2px 0 0 14px;\r\n\tfloat:left;\r\n\tdisplay:block;\r\n\tbackground:rgb(201, 44, 25);\r\n\twidth:30px;\r\n\theight:276px;\r\n\t-moz-transform:rotate(3deg);\r\n\t-webkit-transform:rotate(3deg);\r\n\t-o-transform:rotate(3deg);\r\n\ttransform:rotate(3deg);\r\n\tborder-radius:22px 0 0 20px;\r\n\t-moz-border-radius:22px 0 0 20px;\r\n\t-webkit-border-radius:22px 0 0 20px;\r\n\tbox-shadow:\r\n\t\t-1px 1px 0 rgb(109, 10, 0),\r\n\t\t-2px 2px 0 rgb(109, 10, 0),\r\n\t\t-3px 3px 0 rgb(109, 10, 0),\r\n\t\t-4px 4px 0 rgb(109, 10, 0),\r\n\t\t-5px 5px 0 rgb(109, 10, 0),\r\n\t\t-6px 6px 0 rgb(109, 10, 0);\r\n\t-webkit-box-shadow:\r\n\t\t-1px 1px 0 rgb(109, 10, 0),\r\n\t\t-2px 2px 0 rgb(109, 10, 0),\r\n\t\t-3px 3px 0 rgb(109, 10, 0),\r\n\t\t-4px 4px 0 rgb(109, 10, 0),\r\n\t\t-5px 5px 0 rgb(109, 10, 0),\r\n\t\t-6px 6px 0 rgb(109, 10, 0);\r\n\t-moz-box-shadow:\r\n\t\t-1px 1px 0 rgb(109, 10, 0),\r\n\t\t-2px 2px 0 rgb(109, 10, 0),\r\n\t\t-3px 3px 0 rgb(109, 10, 0),\r\n\t\t-4px 4px 0 rgb(109, 10, 0),\r\n\t\t-5px 5px 0 rgb(109, 10, 0),\r\n\t\t-6px 6px 0 rgb(109, 10, 0);\r\n\t}\r\n<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/gmail-logo-css3\/2.2.element1-before.jpg\" alt=\"gmail logo in css\" width=\"250\" height=\"243\"><\/figure>\n<p>Styling <code>.element1::after<\/code><\/p>\n<pre>\r\n#gmail-logo2 .element1::after {\r\n\tcontent:'';\r\n\tposition:relative;\r\n\tmargin:40px 5px 0 0;\r\n\tfloat:right;\r\n\tdisplay:block;\r\n\tbackground:rgb(201, 44, 25);\r\n\twidth:30px;\r\n\theight:238px;\r\n\t-moz-transform:rotate(3deg);\r\n\t-webkit-transform:rotate(3deg);\r\n\t-o-transform:rotate(3deg);\r\n\ttransform:rotate(3deg);\r\n\tborder-radius:0 18px 26px 0;\r\n\t-webkit-border-radius:0 18px 26px 0;\r\n\t-moz-border-radius:0 18px 26px 0;\r\n\tbox-shadow:\r\n\t\t-1px 1px 0 rgb(109, 10, 0),\r\n\t\t-2px 2px 0 rgb(109, 10, 0),\r\n\t\t-3px 3px 0 rgb(109, 10, 0),\r\n\t\t-4px 4px 0 rgb(109, 10, 0),\r\n\t\t-5px 5px 0 rgb(109, 10, 0),\r\n\t\t-6px 6px 0 rgb(109, 10, 0),\r\n\t\t-6px 7px 0 rgb(109, 10, 0);\r\n\t-moz-box-shadow:\r\n\t\t-1px 1px 0 rgb(109, 10, 0),\r\n\t\t-2px 2px 0 rgb(109, 10, 0),\r\n\t\t-3px 3px 0 rgb(109, 10, 0),\r\n\t\t-4px 4px 0 rgb(109, 10, 0),\r\n\t\t-5px 5px 0 rgb(109, 10, 0),\r\n\t\t-6px 6px 0 rgb(109, 10, 0),\r\n\t\t-6px 7px 0 rgb(109, 10, 0);\r\n\t-webkit-box-shadow:\r\n\t\t-1px 1px 0 rgb(109, 10, 0),\r\n\t\t-2px 2px 0 rgb(109, 10, 0),\r\n\t\t-3px 3px 0 rgb(109, 10, 0),\r\n\t\t-4px 4px 0 rgb(109, 10, 0),\r\n\t\t-5px 5px 0 rgb(109, 10, 0),\r\n\t\t-6px 6px 0 rgb(109, 10, 0),\r\n\t\t-6px 7px 0 rgb(109, 10, 0);\r\n\t}\r\n<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/gmail-logo-css3\/2.3.element1-after.jpg\" alt=\"gmail logo in css\" width=\"250\" height=\"230\"><\/figure>\n<p>Styling <code>.element2::before<\/code><\/p>\n<pre>\r\n#gmail-logo2 .element2::before {\r\n\tcontent:'';\r\n\tmargin:22px 0 0 48px;\r\n\tfloat:left;\r\n\tdisplay:block;\r\n\tbackground:rgb(201, 44, 25);\r\n\twidth:315px;\r\n\theight:14px;\r\n\t-moz-transform:rotate(6.8deg);\r\n\t-webkit-transform:rotate(6.8deg);\r\n\t-o-transform:rotate(6.8deg);\r\n\ttransform:rotate(6.8deg);\r\n\tbox-shadow:\r\n\t\t0 1px 0 rgb(109, 10, 0),\r\n\t\t0 2px 0 rgb(109, 10, 0),\r\n\t\t0 3px 0 rgb(109, 10, 0),\r\n\t\t0 4px 0 rgb(109, 10, 0),\r\n\t\t0 5px 0 rgb(109, 10, 0),\r\n\t\t-6px 6px 0 rgb(109, 10, 0);\r\n\t-webkit-box-shadow:\r\n\t\t0 1px 0 rgb(109, 10, 0),\r\n\t\t0 2px 0 rgb(109, 10, 0),\r\n\t\t0 3px 0 rgb(109, 10, 0),\r\n\t\t0 4px 0 rgb(109, 10, 0),\r\n\t\t0 5px 0 rgb(109, 10, 0),\r\n\t\t-6px 6px 0 rgb(109, 10, 0);\r\n\t-moz-box-shadow:\r\n\t\t0 1px 0 rgb(109, 10, 0),\r\n\t\t0 2px 0 rgb(109, 10, 0),\r\n\t\t0 3px 0 rgb(109, 10, 0),\r\n\t\t0 4px 0 rgb(109, 10, 0),\r\n\t\t0 5px 0 rgb(109, 10, 0),\r\n\t\t-6px 6px 0 rgb(109, 10, 0);\r\n\t}<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/gmail-logo-css3\/2.4.element2-before.jpg\" alt=\"gmail logo in css\" width=\"250\" height=\"220\"><\/figure>\n<p>Styling <code>.element2::after<\/code><\/p>\n<pre>\r\n#gmail-logo2 .element2::after {\r\n\tcontent:'';\r\n\tposition:relative;\r\n\tmargin:230px 0 0 36px;\r\n\tfloat:left;\r\n\tdisplay:block;\r\n\tbackground:rgb(201, 44, 25);\r\n\twidth:310px;\r\n\theight:12px;\r\n\tbox-shadow:\r\n\t\t0 1px 0 rgb(109, 10, 0),\r\n\t\t0 2px 0 rgb(109, 10, 0),\r\n\t\t0 3px 0 rgb(109, 10, 0),\r\n\t\t0 4px 0 rgb(109, 10, 0),\r\n\t\t0 5px 0 rgb(109, 10, 0),\r\n\t\t-6px 6px 0 rgb(109, 10, 0);\r\n\t-webkit-box-shadow:\r\n\t\t0 1px 0 rgb(109, 10, 0),\r\n\t\t0 2px 0 rgb(109, 10, 0),\r\n\t\t0 3px 0 rgb(109, 10, 0),\r\n\t\t0 4px 0 rgb(109, 10, 0),\r\n\t\t0 5px 0 rgb(109, 10, 0),\r\n\t\t-6px 6px 0 rgb(109, 10, 0);\r\n\t-moz-box-shadow:\r\n\t\t0 1px 0 rgb(109, 10, 0),\r\n\t\t0 2px 0 rgb(109, 10, 0),\r\n\t\t0 3px 0 rgb(109, 10, 0),\r\n\t\t0 4px 0 rgb(109, 10, 0),\r\n\t\t0 5px 0 rgb(109, 10, 0),\r\n\t\t-6px 6px 0 rgb(109, 10, 0);\t\r\n\t}<\/pre>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/gmail-logo-css3\/2.5.element2-after.jpg\" alt=\"gmail logo in css\"><\/figure>\n<p>Styling <code>.element3::before<\/code><\/p>\n<pre>\r\n#gmail-logo2 .element3::before {\r\n\tcontent:'';\r\n\tposition:relative;\r\n\tmargin:8px 0 0 42px;\r\n\tfloat:left;\r\n\tdisplay:block;\r\n\tbackground:rgb(201, 44, 25);\r\n\twidth:42px;\r\n\theight:268px;\r\n\t-moz-transform:rotate(3deg);\r\n\t-webkit-transform:rotate(3deg);\r\n\t-o-transform:rotate(3deg);\r\n\ttransform:rotate(3deg);\r\n\t}<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/gmail-logo-css3\/2.6.element3-before.jpg\" alt=\"gmail logo in css\" width=\"250\" height=\"216\"><\/figure>\n<p>Styling <code>.element3::after<\/code><\/p>\n<pre>\r\n#gmail-logo2 .element3::after {\r\n\tcontent:'';\r\n\tposition:relative;\r\n\tmargin:40px 32px 0 0;\r\n\tfloat:right;\r\n\tdisplay:block;\r\n\tbackground:rgb(201, 44, 25);\r\n\twidth:22px;\r\n\theight:236px;\r\n\t-moz-transform:rotate(3.0deg);\r\n\t-webkit-transform:rotate(3.0deg);\r\n\t-o-transform:rotate(3.0deg);\r\n\ttransform:rotate(3.0deg);\r\n\tbox-shadow:\r\n\t\t0 1px 0 rgb(109, 10, 0),\r\n\t\t0 2px 0 rgb(109, 10, 0),\r\n\t\t0 3px 0 rgb(109, 10, 0),\r\n\t\t0 4px 0 rgb(109, 10, 0),\r\n\t\t0 5px 0 rgb(109, 10, 0),\r\n\t\t-6px 6px 0 rgb(109, 10, 0);\r\n\t-webkit-box-shadow:\r\n\t\t0 1px 0 rgb(109, 10, 0),\r\n\t\t0 2px 0 rgb(109, 10, 0),\r\n\t\t0 3px 0 rgb(109, 10, 0),\r\n\t\t0 4px 0 rgb(109, 10, 0),\r\n\t\t0 5px 0 rgb(109, 10, 0),\r\n\t\t-6px 6px 0 rgb(109, 10, 0);\r\n\t-moz-box-shadow:\r\n\t\t0 1px 0 rgb(109, 10, 0),\r\n\t\t0 2px 0 rgb(109, 10, 0),\r\n\t\t0 3px 0 rgb(109, 10, 0),\r\n\t\t0 4px 0 rgb(109, 10, 0),\r\n\t\t0 5px 0 rgb(109, 10, 0),\r\n\t\t-6px 6px 0 rgb(109, 10, 0);\r\n\t}<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/gmail-logo-css3\/2.7.element3-after.jpg\" alt=\"gmail logo in css\" width=\"250\" height=\"223\"><\/figure>\n<p>Styling <code>.element4::before<\/code><\/p>\n<pre>\r\n#gmail-logo2 .element4::before {\r\n\tcontent:'';\r\n\tposition:relative;\r\n\tmargin:-2px 0 0 130px;\r\n\tfloat:left;\r\n\tdisplay:block;\r\n\tbackground:rgb(201, 44, 25);\r\n\twidth:54px;\r\n\theight:192px;\r\n\t-moz-transform:rotate(-49deg);\r\n\t-webkit-transform:rotate(-49deg);\r\n\t-o-transform:rotate(-49deg);\r\n\ttransform:rotate(-49deg);\r\n\tbox-shadow:\r\n\t\t-1px 0 0 rgb(109, 10, 0),\r\n\t\t-2px 0 0 rgb(109, 10, 0),\r\n\t\t-3px 0 0 rgb(109, 10, 0),\r\n\t\t-4px 0 0 rgb(109, 10, 0),\r\n\t\t-5px 0 0 rgb(109, 10, 0),\r\n\t\t-6px 0 0 rgb(109, 10, 0),\r\n\t\t-7px 0 0 rgb(109, 10, 0),\r\n\t\t-8px 0 0 rgb(109, 10, 0);\r\n\t-moz-box-shadow:\r\n\t\t-1px 0 0 rgb(109, 10, 0),\r\n\t\t-2px 0 0 rgb(109, 10, 0),\r\n\t\t-3px 0 0 rgb(109, 10, 0),\r\n\t\t-4px 0 0 rgb(109, 10, 0),\r\n\t\t-5px 0 0 rgb(109, 10, 0),\r\n\t\t-6px 0 0 rgb(109, 10, 0),\r\n\t\t-7px 0 0 rgb(109, 10, 0),\r\n\t\t-8px 0 0 rgb(109, 10, 0);\r\n\t-webkit-box-shadow:\r\n\t\t-1px 0 0 rgb(109, 10, 0),\r\n\t\t-2px 0 0 rgb(109, 10, 0),\r\n\t\t-3px 0 0 rgb(109, 10, 0),\r\n\t\t-4px 0 0 rgb(109, 10, 0),\r\n\t\t-5px 0 0 rgb(109, 10, 0),\r\n\t\t-6px 0 0 rgb(109, 10, 0),\r\n\t\t-7px 0 0 rgb(109, 10, 0),\r\n\t\t-8px 0 0 rgb(109, 10, 0);\r\n\t}<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/gmail-logo-css3\/2.8.element4-before.jpg\" alt=\"gmail logo in css\" width=\"250\" height=\"215\"><\/figure>\n<p>Styling <code>.element4::after<\/code><\/p>\n<pre>\r\n#gmail-logo2 .element4::after {\r\n\tcontent:'';\r\n\tposition:relative;\r\n\tmargin:12px 88px 0 0;\r\n\tfloat:right;\r\n\tdisplay:block;\r\n\tbackground:rgb(201, 44, 25);\r\n\twidth:54px;\r\n\theight:186px;\r\n\tborder-radius:30px 0 0 0;\r\n\t-webkit-border-radius:30px 0 0 0;\r\n\t-moz-border-radius:30px 0 0 0;\r\n\t-moz-transform:rotate(53deg);\r\n\t-webkit-transform:rotate(53deg);\r\n\t-o-transform:rotate(53deg);\r\n\ttransform:rotate(53deg);\r\n\t}<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/gmail-logo-css3\/2.9.element4-after.jpg\" alt=\"gmail logo in css\" width=\"250\" height=\"214\"><\/figure>\n<p>Styling <code>.element5::before<\/code><\/p>\n<pre>#gmail-logo2 .element5::before {\r\n\tcontent:'';\r\n\tposition:relative;\r\n\tmargin:115px 0 0 125px;\r\n\tfloat:left;\r\n\tdisplay:block;\r\n\tbackground:rgb(201, 44, 25);\r\n\twidth:2px;\r\n\theight:150px;\r\n\t-moz-transform:rotate(55deg);\r\n\t-o-transform:rotate(55deg);\r\n\t-webkit-transform:rotate(55deg);\r\n\ttransform:rotate(55deg);\r\n\t}<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/gmail-logo-css3\/2.10.element5-before.jpg\" alt=\"gmail logo in css\" width=\"250\" height=\"207\"><\/figure>\n<p>Styling <code>.element5::after<\/code><\/p>\n<pre>\r\n#gmail-logo2 .element5::after {\r\n\tposition:relative;\r\n\tcontent:'';\r\n\tmargin:115px 0 0 150px;\r\n\tfloat:left;\r\n\tdisplay:block;\r\n\tbackground:rgb(201, 44, 25);\r\n\twidth:2px;\r\n\theight:150px;\r\n\t-moz-transform:rotate(-50deg);\r\n\t-webkit-transform:rotate(-50deg);\r\n\t-o-transform:rotate(-50deg);\r\n\ttransform:rotate(-50deg);\r\n\t}<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/gmail-logo-css3\/2.11.element5-after.jpg\" alt=\"gmail logo in css\" width=\"250\" height=\"218\"><\/figure>\n<p>Adjusting the priority of <code>z-index<\/code>.<\/p>\n<pre>\r\n#gmail-logo2 .element1::before {z-index:3;}\r\n#gmail-logo2 .element1::after {z-index:1;}\r\n\/*#gmail-logo2 .element2::before {}*\/\r\n#gmail-logo2 .element2::after {z-index:2;}\r\n#gmail-logo2 .element3::before {z-index:5;}\r\n#gmail-logo2 .element3::after {z-index:1;}\r\n#gmail-logo2 .element4::before {z-index:4;}\r\n#gmail-logo2 .element4::after {z-index:3;}\r\n\/*#gmail-logo2 .element5::before {}\r\n#gmail-logo2 .element5::after {}*\/<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/gmail-logo-css3\/2.12-z-index.jpg\" alt=\"gmail logo in css\" width=\"600\" height=\"328\"><\/figure>\n<p>We are almost done. Your Gmail logo should look something like this:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/gmail-logo-css3\/2.13-gmail.jpg\" alt=\"gmail logo in css\" width=\"250\" height=\"200\"><\/figure>\n<p>Finally, let\u2019s give it a different color upon hovered.<\/p>\n<pre>\r\n#gmail-logo2:hover *::after,\r\n#gmail-logo2:hover *::before {\r\nbackground:rgba(20, 196, 7, 1);\r\n}\r\n#gmail-logo2:hover .element1::before {\r\n\tbox-shadow:\r\n\t\t-1px 1px 0 rgb(10, 90, 4),\r\n\t\t-2px 2px 0 rgb(10, 90, 4),\r\n\t\t-3px 3px 0 rgb(10, 90, 4),\r\n\t\t-4px 4px 0 rgb(10, 90, 4),\r\n\t\t-5px 5px 0 rgb(10, 90, 4),\r\n\t\t-6px 6px 0 rgb(10, 90, 4);\r\n\t-webkit-box-shadow:\r\n\t\t-1px 1px 0 rgb(10, 90, 4),\r\n\t\t-2px 2px 0 rgb(10, 90, 4),\r\n\t\t-3px 3px 0 rgb(10, 90, 4),\r\n\t\t-4px 4px 0 rgb(10, 90, 4),\r\n\t\t-5px 5px 0 rgb(10, 90, 4),\r\n\t\t-6px 6px 0 rgb(10, 90, 4);\r\n\t-moz-box-shadow:\r\n\t\t-1px 1px 0 rgb(10, 90, 4),\r\n\t\t-2px 2px 0 rgb(10, 90, 4),\r\n\t\t-3px 3px 0 rgb(10, 90, 4),\r\n\t\t-4px 4px 0 rgb(10, 90, 4),\r\n\t\t-5px 5px 0 rgb(10, 90, 4),\r\n\t\t-6px 6px 0 rgb(10, 90, 4);\r\n\t}\r\n#gmail-logo2:hover .element1::after {\r\n\tbox-shadow:\r\n\t\t-1px 1px 0 rgb(10, 90, 4),\r\n\t\t-2px 2px 0 rgb(10, 90, 4),\r\n\t\t-3px 3px 0 rgb(10, 90, 4),\r\n\t\t-4px 4px 0 rgb(10, 90, 4),\r\n\t\t-5px 5px 0 rgb(10, 90, 4),\r\n\t\t-6px 6px 0 rgb(10, 90, 4),\r\n\t\t-6px 7px 0 rgb(10, 90, 4);\r\n\t-moz-box-shadow:\r\n\t\t-1px 1px 0 rgb(10, 90, 4),\r\n\t\t-2px 2px 0 rgb(10, 90, 4),\r\n\t\t-3px 3px 0 rgb(10, 90, 4),\r\n\t\t-4px 4px 0 rgb(10, 90, 4),\r\n\t\t-5px 5px 0 rgb(10, 90, 4),\r\n\t\t-6px 6px 0 rgb(10, 90, 4),\r\n\t\t-6px 7px 0 rgb(10, 90, 4);\r\n\t-webkit-box-shadow:\r\n\t\t-1px 1px 0 rgb(10, 90, 4),\r\n\t\t-2px 2px 0 rgb(10, 90, 4),\r\n\t\t-3px 3px 0 rgb(10, 90, 4),\r\n\t\t-4px 4px 0 rgb(10, 90, 4),\r\n\t\t-5px 5px 0 rgb(10, 90, 4),\r\n\t\t-6px 6px 0 rgb(10, 90, 4),\r\n\t\t-6px 7px 0 rgb(10, 90, 4);\r\n\t}\r\n#gmail-logo2:hover .element2::before {\r\n\tbox-shadow:\r\n\t\t0 1px 0 rgb(10, 90, 4),\r\n\t\t0 2px 0 rgb(10, 90, 4),\r\n\t\t0 3px 0 rgb(10, 90, 4),\r\n\t\t0 4px 0 rgb(10, 90, 4),\r\n\t\t0 5px 0 rgb(10, 90, 4),\r\n\t\t-6px 6px 0 rgb(10, 90, 4);\r\n\t-webkit-box-shadow:\r\n\t\t0 1px 0 rgb(10, 90, 4),\r\n\t\t0 2px 0 rgb(10, 90, 4),\r\n\t\t0 3px 0 rgb(10, 90, 4),\r\n\t\t0 4px 0 rgb(10, 90, 4),\r\n\t\t0 5px 0 rgb(10, 90, 4),\r\n\t\t-6px 6px 0 rgb(10, 90, 4);\r\n\t-moz-box-shadow:\r\n\t\t0 1px 0 rgb(10, 90, 4),\r\n\t\t0 2px 0 rgb(10, 90, 4),\r\n\t\t0 3px 0 rgb(10, 90, 4),\r\n\t\t0 4px 0 rgb(10, 90, 4),\r\n\t\t0 5px 0 rgb(10, 90, 4),\r\n\t\t-6px 6px 0 rgb(10, 90, 4);\r\n\t}\r\n#gmail-logo2:hover .element2::after {\r\n\tbox-shadow:\r\n\t\t0 1px 0 rgb(10, 90, 4),\r\n\t\t0 2px 0 rgb(10, 90, 4),\r\n\t\t0 3px 0 rgb(10, 90, 4),\r\n\t\t0 4px 0 rgb(10, 90, 4),\r\n\t\t0 5px 0 rgb(10, 90, 4),\r\n\t\t-6px 6px 0 rgb(10, 90, 4);\r\n\t-webkit-box-shadow:\r\n\t\t0 1px 0 rgb(10, 90, 4),\r\n\t\t0 2px 0 rgb(10, 90, 4),\r\n\t\t0 3px 0 rgb(10, 90, 4),\r\n\t\t0 4px 0 rgb(10, 90, 4),\r\n\t\t0 5px 0 rgb(10, 90, 4),\r\n\t\t-6px 6px 0 rgb(10, 90, 4);\r\n\t-moz-box-shadow:\r\n\t\t0 1px 0 rgb(10, 90, 4),\r\n\t\t0 2px 0 rgb(10, 90, 4),\r\n\t\t0 3px 0 rgb(10, 90, 4),\r\n\t\t0 4px 0 rgb(10, 90, 4),\r\n\t\t0 5px 0 rgb(10, 90, 4),\r\n\t\t-6px 6px 0 rgb(10, 90, 4);\t\r\n\t}\r\n#gmail-logo2:hover .element3::after {\r\n\tbox-shadow:\r\n\t\t0 1px 0 rgb(10, 90, 4),\r\n\t\t0 2px 0 rgb(10, 90, 4),\r\n\t\t0 3px 0 rgb(10, 90, 4),\r\n\t\t0 4px 0 rgb(10, 90, 4),\r\n\t\t0 5px 0 rgb(10, 90, 4),\r\n\t\t-6px 6px 0 rgb(10, 90, 4);\r\n\t-webkit-box-shadow:\r\n\t\t0 1px 0 rgb(10, 90, 4),\r\n\t\t0 2px 0 rgb(10, 90, 4),\r\n\t\t0 3px 0 rgb(10, 90, 4),\r\n\t\t0 4px 0 rgb(10, 90, 4),\r\n\t\t0 5px 0 rgb(10, 90, 4),\r\n\t\t-6px 6px 0 rgb(10, 90, 4);\r\n\t-moz-box-shadow:\r\n\t\t0 1px 0 rgb(10, 90, 4),\r\n\t\t0 2px 0 rgb(10, 90, 4),\r\n\t\t0 3px 0 rgb(10, 90, 4),\r\n\t\t0 4px 0 rgb(10, 90, 4),\r\n\t\t0 5px 0 rgb(10, 90, 4),\r\n\t\t-6px 6px 0 rgb(10, 90, 4);\r\n\t}\r\n#gmail-logo2:hover .element4::before {\r\n\tbox-shadow:\r\n\t\t-1px 0 0 rgb(10, 90, 4),\r\n\t\t-2px 0 0 rgb(10, 90, 4),\r\n\t\t-3px 0 0 rgb(10, 90, 4),\r\n\t\t-4px 0 0 rgb(10, 90, 4),\r\n\t\t-5px 0 0 rgb(10, 90, 4),\r\n\t\t-6px 0 0 rgb(10, 90, 4),\r\n\t\t-7px 0 0 rgb(10, 90, 4),\r\n\t\t-8px 0 0 rgb(10, 90, 4);\r\n\t-moz-box-shadow:\r\n\t\t-1px 0 0 rgb(10, 90, 4),\r\n\t\t-2px 0 0 rgb(10, 90, 4),\r\n\t\t-3px 0 0 rgb(10, 90, 4),\r\n\t\t-4px 0 0 rgb(10, 90, 4),\r\n\t\t-5px 0 0 rgb(10, 90, 4),\r\n\t\t-6px 0 0 rgb(10, 90, 4),\r\n\t\t-7px 0 0 rgb(10, 90, 4),\r\n\t\t-8px 0 0 rgb(10, 90, 4);\r\n\t-webkit-box-shadow:\r\n\t\t-1px 0 0 rgb(10, 90, 4),\r\n\t\t-2px 0 0 rgb(10, 90, 4),\r\n\t\t-3px 0 0 rgb(10, 90, 4),\r\n\t\t-4px 0 0 rgb(10, 90, 4),\r\n\t\t-5px 0 0 rgb(10, 90, 4),\r\n\t\t-6px 0 0 rgb(10, 90, 4),\r\n\t\t-7px 0 0 rgb(10, 90, 4),\r\n\t\t-8px 0 0 rgb(10, 90, 4);\r\n\t}<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/gmail-logo-css3\/2.14-hover.jpg\" alt=\"gmail logo in css\" width=\"250\" height=\"224\"><\/figure>\n<p><a target=\"_blank\" href=\"https:\/\/assets.hongkiat.com\/uploads\/gmail-logo-css3\/gmail-logo-2.html\" rel=\"noopener noreferrer\">Preview<\/a> | <a href=\"https:\/\/assets.hongkiat.com\/uploads\/gmail-logo-css3\/gmail-logo-2.zip\">Download source file<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>A while ago I showed you how to create RSS feed logo with CSS3. I figured it\u2019d be fun creating something a little bit more complex. In today\u2019s post, I\u2019m going to show you how to create not one, but two variations of Gmail logo using just CSS3. Shortcuts to: Gmail logo CSS tutorial #1&hellip;<\/p>\n","protected":false},"author":214,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[507,137,506,2016],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Create Gmail logo with CSS3 - Hongkiat<\/title>\n<meta name=\"description\" content=\"A while ago I showed you how to create RSS feed logo with CSS3. I figured it&#039;d be fun creating something a little bit more complex. In today&#039;s post, I&#039;m\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/gmail-logo-css3\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create Gmail logo with CSS3\" \/>\n<meta property=\"og:description\" content=\"A while ago I showed you how to create RSS feed logo with CSS3. I figured it&#039;d be fun creating something a little bit more complex. In today&#039;s post, I&#039;m\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/gmail-logo-css3\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2020-01-10T13:11:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-15T09:06:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/gmail-logo-css3\/1.4-gmail-wrap.jpg\" \/>\n<meta name=\"author\" content=\"Irham Kendeni\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Irham Kendeni\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/gmail-logo-css3\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/gmail-logo-css3\\\/\"},\"author\":{\"name\":\"Irham Kendeni\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/6b6b35fed47202b91a43aaebb44811e0\"},\"headline\":\"How to Create Gmail logo with CSS3\",\"datePublished\":\"2020-01-10T13:11:33+00:00\",\"dateModified\":\"2022-07-15T09:06:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/gmail-logo-css3\\\/\"},\"wordCount\":318,\"commentCount\":24,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/gmail-logo-css3\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/gmail-logo-css3\\\/1.4-gmail-wrap.jpg\",\"keywords\":[\"CSS\",\"Gmail\",\"HTML\",\"HTML5 \\\/ CSS3 Tutorials\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/gmail-logo-css3\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/gmail-logo-css3\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/gmail-logo-css3\\\/\",\"name\":\"How to Create Gmail logo with CSS3 - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/gmail-logo-css3\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/gmail-logo-css3\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/gmail-logo-css3\\\/1.4-gmail-wrap.jpg\",\"datePublished\":\"2020-01-10T13:11:33+00:00\",\"dateModified\":\"2022-07-15T09:06:23+00:00\",\"description\":\"A while ago I showed you how to create RSS feed logo with CSS3. I figured it'd be fun creating something a little bit more complex. In today's post, I'm\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/gmail-logo-css3\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/gmail-logo-css3\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/gmail-logo-css3\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/gmail-logo-css3\\\/1.4-gmail-wrap.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/gmail-logo-css3\\\/1.4-gmail-wrap.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/gmail-logo-css3\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create Gmail logo with CSS3\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/6b6b35fed47202b91a43aaebb44811e0\",\"name\":\"Irham Kendeni\",\"description\":\"Irham, also known as Indaam, is a web designer and developer from Indonesia. He also loves CSS and WordPress theme development.\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/irhamkendeni\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Create Gmail logo with CSS3 - Hongkiat","description":"A while ago I showed you how to create RSS feed logo with CSS3. I figured it'd be fun creating something a little bit more complex. In today's post, I'm","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/gmail-logo-css3\/","og_locale":"en_US","og_type":"article","og_title":"How to Create Gmail logo with CSS3","og_description":"A while ago I showed you how to create RSS feed logo with CSS3. I figured it'd be fun creating something a little bit more complex. In today's post, I'm","og_url":"https:\/\/www.hongkiat.com\/blog\/gmail-logo-css3\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2020-01-10T13:11:33+00:00","article_modified_time":"2022-07-15T09:06:23+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/gmail-logo-css3\/1.4-gmail-wrap.jpg","type":"","width":"","height":""}],"author":"Irham Kendeni","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Irham Kendeni","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/gmail-logo-css3\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/gmail-logo-css3\/"},"author":{"name":"Irham Kendeni","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/6b6b35fed47202b91a43aaebb44811e0"},"headline":"How to Create Gmail logo with CSS3","datePublished":"2020-01-10T13:11:33+00:00","dateModified":"2022-07-15T09:06:23+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/gmail-logo-css3\/"},"wordCount":318,"commentCount":24,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/gmail-logo-css3\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/gmail-logo-css3\/1.4-gmail-wrap.jpg","keywords":["CSS","Gmail","HTML","HTML5 \/ CSS3 Tutorials"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/gmail-logo-css3\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/gmail-logo-css3\/","url":"https:\/\/www.hongkiat.com\/blog\/gmail-logo-css3\/","name":"How to Create Gmail logo with CSS3 - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/gmail-logo-css3\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/gmail-logo-css3\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/gmail-logo-css3\/1.4-gmail-wrap.jpg","datePublished":"2020-01-10T13:11:33+00:00","dateModified":"2022-07-15T09:06:23+00:00","description":"A while ago I showed you how to create RSS feed logo with CSS3. I figured it'd be fun creating something a little bit more complex. In today's post, I'm","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/gmail-logo-css3\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/gmail-logo-css3\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/gmail-logo-css3\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/gmail-logo-css3\/1.4-gmail-wrap.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/gmail-logo-css3\/1.4-gmail-wrap.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/gmail-logo-css3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Create Gmail logo with CSS3"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/6b6b35fed47202b91a43aaebb44811e0","name":"Irham Kendeni","description":"Irham, also known as Indaam, is a web designer and developer from Indonesia. He also loves CSS and WordPress theme development.","sameAs":["https:\/\/www.hongkiat.com\/blog\/"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/irhamkendeni\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-2QO","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/10962","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/214"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=10962"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/10962\/revisions"}],"predecessor-version":[{"id":56236,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/10962\/revisions\/56236"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=10962"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=10962"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=10962"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=10962"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}