5 Logos using Pure CSS – Coding Torque

Share your love

5 Logos using Pure CSS

Hello Coders! Welcome to Coding Torque. In this blog, We are going to create 5 different logos using pure CSS. Let’s get started 🚀.

Demo

1. Avengers Logo using Pure CSS

Code Credit: codepen
HTML Code
<!doctype html>
<html lang="en">

<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Font Awesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
crossorigin="anonymous" />

<title>Avengers Logo using pure css - @code.scientist x @codingtorque</title>
</head>

<body>
<div class="container">

<div> class="circle"></div>
<div> class="a-1"></div>
<div> class="a-2"></div>
<div> class="a-3"></div>
<div> class="arrow-right"></div>
<div> class="arrow-down"></div>
<div> class="arrow-left"></div>
<div> class="black-bar-1"></div>
<div> class="black-bar-2"></div>

</div>
</body>

</html>

CSS Code
body {
background: #000000;
}

.container {
width: 700px;
height: auto;
margin: 150px auto;
position: relative;
}

.circle {
width: 600px;
height: 600px;
border: solid 50px #ffffff;
border-radius: 50%;
top: 70px;
position: absolute;
z-index: 10;
}

.a-1 {
width: 100px;
height: 770px;
background: #ffffff;
transform: skewX(-25deg);
position: absolute;
left: 200px;
z-index: 20px;
}

.a-2 {
width: 100px;
height: 380px;
background: #ffffff;
position: absolute;
left: 400px;
z-index: 30;
}

.a-3 {
width: 190px;
height: 100px;
background: #ffffff;
position: absolute;
left: 210px;
top: 450px;
z-index: 40;
}

.arrow-right {
width: 0;
height: 0;
border-top: 90px solid transparent;
border-bottom: 90px solid transparent;
border-left: 120px solid #ffffff;
left: 400px;
top: 410px;
position: absolute;
z-index: 50px;
}

.arrow-down {
width: 0;
height: 0;
border-bottom: 80px solid transparent;
border-right: 100px solid #ffffff;
left: 400px;
top: 380px;
position: absolute;
z-index: 60;
}

.arrow-left {
width: 0;
height: 0;
border-top: 80px solid transparent;
border-right: 100px solid #ffffff;
left: 400px;
top: 540px;
position: absolute;
z-index: 70;
}

.black-bar-1,
.black-bar-2 {
width: 25px;
height: 80px;
background: #000000;
transform: skewX(-25deg);
position: absolute;
}

.black-bar-1 {
left: 158px;
top: 650px;
z-index: 80;
}

.black-bar-2 {
left: 72px;
top: 565px;
z-index: 90;
}

2. Google Logo using Pure CSS

Google Logo using Pure CSS
Code Credit: codepen
HTML Code
<!doctype html>
<html lang="en">

<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Font Awesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
crossorigin="anonymous" />

<title>Google Logo using pure css - @code.scientist x @codingtorque</title>
</head>

<body>
<div id="container">
<div id="logo">
<div class="g-line"></div>
<span class="red"></span>
<span class="yellow"></span>
<span class="green"></span>
<span class="blue"></span>
</div>
</div>
</body>

</html>

CSS Code
 html,
body {
background: #f1f1f1;
margin: 0;
min-height: 100%;
}

#container {
position: relative;
margin-left: auto;
margin-top: 200px;
margin-right: auto;
width: 1000px;
height: 300px;
}

#logo {
position: relative;
width: 300px;
height: 300px;
border-radius: 50%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
border: 25px solid #f1f1f1;
box-shadow: 0 0px 4px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.24);
}

#logo::after {
position: absolute;
content: '';
display: block;
width: 60%;
height: 60%;
border-radius: 50%;
background: #f1f1f1;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
z-index: 4;
}

#logo::before {
position: absolute;
content: '';
display: block;
width: 35%;
height: 32%;
background: #f1f1f1;
right: 0;
z-index: 10;
bottom: 50%;
transform: rotateZ(45deg);
}

.g-line {
width: 50%;
height: 20%;
background: #0091ea;
position: absolute;
right: 0;
margin: auto;
border-bottom-right-radius: 4px 20px;
top: 0;
bottom: 0;
z-index: 15;
}

.yellow {
width: 40%;
height: 40%;
position: absolute;
left: -15%;
bottom: 32%;
margin: auto;
background: #ffc107;
transform: rotateZ(-48deg);
z-index: 3;
}

.green {
position: absolute;
width: 100%;
height: 50%;
bottom: 0;
border-radius: 0 0 100% 100%;
background: #4caf50;
z-index: 2;
}

.blue {
position: absolute;
width: 0px;
height: 0px;
right: 0;
z-index: 30;
top: 50%;
z-index: 2;
width: 35%;
height: 32%;
background: #0091ea;
right: 0;
z-index: 2;
transform: rotateZ(45deg);
}

.red {
width: 81%;
height: 50%;
position: absolute;
top: 0px;
background: #f44336;
}

3. Instagram Logo using Pure CSS

Instagram Logo using Pure CSS
HTML Code
<!doctype html>
<html lang="en">

<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Instagram Logo using HTML & CSS - @code.scientist</title>
</head>

<body>
<div class="logo">
<div class="inner-box"></div>
</div>
</body>

</html>

CSS Code
body {
background-color: #111827;
color: white;
display: flex;
align-items: center;
justify-content: center;
}

.logo {
margin-top: 10rem;
height: 8rem;
width: 8rem;
background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
border-radius: 25px;
display: flex;
align-items: center;
justify-content: center;
}

.inner-box {
border: 8px solid white;
height: 70%;
width: 70%;
border-radius: 25px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}

.inner-box::after {
content: '';
border: 8px solid white;
height: 50%;
width: 50%;
border-radius: 50%;
}

.inner-box::before {
content: '';
background-color: white;
height: 15px;
width: 15px;
border-radius: 50%;
position: absolute;
top: 7px;
right: 7px;
}

4. Facebook Logo using Pure CSS

Facebook Logo using Pure CSS

Code Credit: codepen
HTML Code
<!doctype html>
<html lang="en">

<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Facebook Logo using HTML & CSS - @code.scientist and @codingtorque</title>
</head>


<body>
<div id='f-icon'></div>
</body>

</html>

CSS Code
        body {
margin-top: 10rem;
text-align: center;
}

#f-icon {
background: #3b5998;
text-indent: -999em;
width: 100px;
height: 110px;
border-radius: 5px;
position: relative;
overflow: hidden;
border: 15px solid #3b5998;
border-bottom: 0;
display: inline-block;
}

#f-icon::before {
background: #3b5998;
content: "/20";
position: absolute;
bottom: -30px;
right: -37px;
width: 40px;
height: 90px;
border: 20px solid #eee;
border-radius: 25px;
}

#f-icon::after {
background: #eee;
content: "/20";
position: absolute;
top: 50px;
right: 5px;
width: 55px;
height: 20px;
}

5. XBox Logo using Pure CSS

XBox Logo using Pure CSS
HTML Code
<!doctype html>
<html lang="en">

<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Xbox logo using pure css - @code.scientist x @julianvelez1997</title>
</head>

<style>

</style>

<body>
<div class="wrapper">
<div class="logo">
<div class="circle">
<div class="xbox"></div>
<div class="xbox-1"></div>
</div>
</div>
</div>
<h1 class="title">xbox</h1>
</body>

</html>
CSS Code
 body {
background: #111;
}

.wrapper {
width: 100px;
margin: auto;
position: relative;
top: 200px;
}

.logo {
display: inline-block;
}

.circle {
width: 100px;
height: 100px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: #eee;
position: relative;
overflow: hidden;
box-shadow: 0 -10px 30px rgba(0, 10, 30, 0.3) inset;
}

.xbox {
position: absolute;
top: 20px;
left: 0;
width: 100px;
height: 60px;
webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
box-shadow: inset 0 10px 10px #2d2, inset 0px 15px 0 #2c2;
-webkit-transform: rotate(-45deg);
}

.xbox-1 {
position: absolute;
top: 20px;
right: 0;
width: 100px;
height: 60px;
border-radius: 50%;
box-shadow: inset 0 10px 10px #2d2, inset 0px 15px 0 #2c2;
}

.title {
text-align: center;
font: normal 36pt sans-serif;
color: #2d2;
}

If you want me to code any project or post any specific post, feel free to DM me at IG @code.scientist or @codingtorque

 If you have any doubt or any project ideas feel free to Contact Us 

Hope you find this post helpful💖 

 Written by: Coding Torque | Piyush Patil 

 Follow us on Instagram for more projects like this👨‍💻 
Share your love