CSS Discord Logo
Tags: css, html, cssart
Published: 2021-09-22 15:09:03

---
title: CSS Discord Logo
published: true
tags: css, html, cssart
cover_image: https://res.cloudinary.com/dzynqn10l/image/upload/v1632280924/JS%20Bits/cover_gaenes.jpg
---

First, we'll need an HTML skeleton. We'll use 2 groups of identical `div`s for the sides of the logo and one `div` for the head/body.

# HTML Structure
```html
  <body>
    <div id="discord-logo">
      <div class="group-left">
        <div class="wing-top"></div>
        <div class="wing-mid"></div>
        <div class="wing-bottom"></div>
        <div class="eye"></div>
      </div>
      <div class="group-right">
        <div class="wing-top"></div>
        <div class="wing-mid"></div>
        <div class="wing-bottom"></div>
        <div class="eye"></div>
      </div>
      <div class="head"></div>
    </div>
  </body>
```

---
# CSS Styles
The CSS begins with styling the head as an oval with a drop shadow on the bottom:
```css
body {
  position: relative;
  background: #040714;
  margin-top: 50px;
}

.head {
  position: relative;
  z-index: 5;
  width: 322px;
  height: 216px;
  top: 22px;
  left: 85px;
  background: #404eed;
  border-radius: 50%;
  box-shadow: inset 0 -12px 0 #00000026;
}
```
<img src="https://res.cloudinary.com/dzynqn10l/image/upload/v1632279758/JS%20Bits/Discord_Logo_1_sfjbpz.jpg" />

Then we'll add some shared styles for the other components:
```css
.wing-top,
.wing-mid,
.wing-bottom,
.eye {
  position: absolute;
  background: #404eed;
  border-radius: 50%;
  z-index: 10;
}
```

Next we'll start creating the left "wing." The top piece will be an oblong oval transformed and skewed:
```css
.wing-top {
  height: 283px;
  width: 99px;
  top: -47px;
  left: 65px;
  transform: rotate(56deg) skewY(7deg);
  clip-path: inset(7% 0 61% 0 round 24px);
}
```
<img src="https://res.cloudinary.com/dzynqn10l/image/upload/v1632279771/JS%20Bits/Discord_Logo_2_nmxnl2.jpg" />

Once we apply that `clip-path` rule above, the shape will be cut away to look like this:
<img src="https://res.cloudinary.com/dzynqn10l/image/upload/v1632279778/JS%20Bits/Discord_Logo_3_krjj2d.jpg" />

When we set the color of this shape to our bluish/purple then the overlap will blend in with the head/body. For the middle part of the wing, we'll add a similar shape then apply another `clip-path` rule:

```css
.wing-mid {
  left: 81px;
  top: 12px;
  height: 263px;
  width: 101px;
  transform: rotate(12deg);
  clip-path: inset(7% 13% 15% 0 round 25px);
}
```
<img src="https://res.cloudinary.com/dzynqn10l/image/upload/v1632279788/JS%20Bits/Discord_Logo_4_nmymdt.jpg" />

With the `clip-path` rule applied:
<img src="https://res.cloudinary.com/dzynqn10l/image/upload/v1632279795/JS%20Bits/Discord_Logo_5_djtyf0.jpg" />

Then we'll add the bottom piece of the wing with this same procedure:
```css
.wing-bottom {
  width: 309px;
  height: 116px;
  top: 144px;
  left: 15px;
  box-shadow: inset -14px -7px 0px 3px #00000026;
  transform: skewY(342deg) rotate(38deg);
  clip-path: inset(83px 118px 0 76px);
}
```
<img src="https://res.cloudinary.com/dzynqn10l/image/upload/v1632279931/JS%20Bits/Discord_Logo_6_k01coh.jpg" />

With `clip-path` applied:
<img src="https://res.cloudinary.com/dzynqn10l/image/upload/v1632279959/JS%20Bits/Discord_Logo_7_jbhgt7.jpg" />

Next we'll add a colored circle for the eye:

```css
.eye {
  background: #040714;
  width: 61px;
  height: 70px;
  top: 116px;
  left: 159px;
}
```

<img src="https://res.cloudinary.com/dzynqn10l/image/upload/v1632279986/JS%20Bits/Discord_Logo_8_uiu87e.jpg" />

Now all we need to do is reflect the `.group-right` element with an inverse `scaleX`:

```css
.group-right {
  z-index: 10;
  position: absolute;
  left: 493px;
  top: 0;
  transform: scaleX(-1);
}
```

And we're done!

<img src="https://res.cloudinary.com/dzynqn10l/image/upload/v1632280069/JS%20Bits/Discord_Logo_9_y3snfl.jpg" />

Here's the final code if you'd like to play around with it yourself: [https://stackblitz.com/edit/web-platform-u1uzd3?file=index.html](https://stackblitz.com/edit/web-platform-u1uzd3?file=index.html)

----------
<b>Yo!</b> I post byte-sized tips like these often. Follow me if you crave more! 🍿

I'm on [TikTok](https://www.tiktok.com/@js_bits), [Twitter](https://twitter.com/JS_Bits_Bill) and I have a new [debugging course](https://jsbits-yo.com/bug-bash/) dropping soon!