Google Logo Using CSS Only
In this blog, we are going to learn “How to Create the Google Logo Using CSS Only.”
Points to be discussed
Preview
YouTube Tutorial
HTML Code
CSS Code
References
Preview :
A live demo of the website can be viewed by clicking here.
YouTube Tutorial :
HTML CODE :
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Logo using Conic Gradient</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@500&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<h2> Google Logo Using CSS Only</h2>
<div class="box">
<h1>G</h1>
</div>
</div>
</body>
</html>
CSS CODE :
style.css
* {
margin: 0;
padding: 0;
}
.container {
text-align: center;
}
.container h2 {
margin: 15px 0px;
}
.container .box {
display: flex;
justify-content: center;
align-items: center;
font-family: 'Kumbh Sans', sans-serif;
}
.box h1 {
width: 400px;
height: 400px;
font-size: 30em;
background-image: conic-gradient(from -20deg at 38% 59%, #DB4437 0deg, #DB4437 90deg, #4285F4 90deg, #4285F4 180deg, #0F9D58 180deg, #0F9D58 270deg, #F4B400 270deg, #F4B400 360deg);
padding-top: 9px;
padding-bottom: 81px;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
References :
Google Fonts: https://fonts.google.com/specimen/Kumbh+Sans
GitHub Repository: https://github.com/rutikkpatel/HTML-CSS/tree/main/CSS%20Gradient/Google_Logo
Top comments (0)