Chris Bongers

Posted on Mar 25, 2022 • Edited on Mar 30, 2022 • Originally published at daily-dev-tips.com

CSS Logos: Netflix logo

#css

For today's article, we'll recreate the iconic Netflix logo. While working on this logo, I found it was quite an easy one.

Super fun to try yourself 💖

Let's take a look at the logo.

Analysing the logo

The logo is built up by three sticks of the same size; however, the middle one casts a shadow and is skewed.

Then at the bottom, it's good to note the logo is a bit rounded off.

My idea is to leverage borders for the two side pillars and pseudo-elements to make the skew stick + the rounded bottom section.

Recreating the Netflix logo in CSS

Let's create a simple box and set the borders left and right to get started.

.netflix {
  height: 15rem;
  width: 3rem;
  border-left: 3rem solid #e50914;
  border-right: 3rem solid #e50914;
  position: relative;
}

It's important to note the 3rem will be the size for each stick.

So far, we get the following styled element.

Let's add a before element to add the third skew line.
The main idea is that this can be simply the width and height of the box.

&:before {
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  background: #e50914;
  transform: skewX(21.5deg);
  box-shadow: 0 0 30px black;
}

We can see we skew the element to fit the edges and add a bit of box-shadow to cast the shadow on the sticks below.

The last thing we need is the bottom rounded effect.
We'll leverage a round box that we offset from the bottom.

&:after {
  content: '';
  width: 15rem;
  height: 2rem;
  background: black;
  border-radius: 50%;
  display: block;
  position: absolute;
  left: -200%;
  top: 98%;
}

Which result in the following CodePen.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Top comments (24)

Renan Franca • Mar 25 '22

This series of CSS logos is amazing🤩
I enjoyed how you detail your approach to make decisions about which CSS options/property you will use 👏

Chris Bongers • Mar 26 '22

Nice, that was my goal so happy to hear it worked out ✊
Got a few more coming, and collecting inspiration for a new set.

Renan Franca • Mar 26 '22

You are welcome!

Got a few more coming, and collecting inspiration for a new set.

I am happy to hear that! Bring it on! 🤓

Lee Wynne • Mar 29 '22

is this a series? can we get them linked together so i can flip between cuz i’m lazy?

Chris Bongers • Mar 30 '22

I will link them together today 💖

Jackson Kasi • Mar 25 '22

Chris Bongers • Mar 26 '22

Glad you enjoyed it Jackson

Atharva Shirdhankar • Mar 25 '22

I have shared your articles on brand logo designing using CSS with my young brother and he is shocked by this amazing designs 🥳
Amazing designs Chris🎉