DEV Community

Cover image for CSS Logos: Netflix logo
Chris Bongers
Chris Bongers

Posted on • Updated on • Originally published at daily-dev-tips.com

CSS Logos: Netflix logo

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.

Netflix 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;
}
Enter fullscreen mode Exit fullscreen mode

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

So far, we get the following styled element.

Two sticks styled

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;
}
Enter fullscreen mode Exit fullscreen mode

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%;
}
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
renanfranca profile image
Renan Franca

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 👏

Collapse
 
dailydevtips1 profile image
Chris Bongers

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

Collapse
 
renanfranca profile image
Renan Franca

You are welcome!

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

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

Collapse
 
leewynne profile image
Lee Wynne

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

Collapse
 
dailydevtips1 profile image
Chris Bongers

I will link them together today 💖

Collapse
 
star_trooper profile image
Atharva Shirdhankar

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🎉

Collapse
 
dailydevtips1 profile image
Chris Bongers

Omg thank you so much 🙌

Looking forward to your brother also making these amazing logos in CSS 💖

Collapse
 
k_penguin_sato profile image
K-Sato

wow

Collapse
 
dailydevtips1 profile image
Chris Bongers

🙌🙌🙌

Collapse
 
jzombie profile image
jzombie

Nice.

The two parallel lines before you arrived at the Netflix logo sort of remind me of Parallels: google.com/search?q=parallels+logo

Collapse
 
dailydevtips1 profile image
Chris Bongers

Damn, I just did two logo's in one 👀

Collapse
 
waylonwalker profile image
Waylon Walker

nicely done

Collapse
 
dailydevtips1 profile image
Chris Bongers

Thanks Waylon 🙌

Collapse
 
svgatorapp profile image
SVGator

Lovely

Collapse
 
jacksonkasi profile image
Jackson Kasi

Collapse
 
dailydevtips1 profile image
Chris Bongers

Glad you enjoyed it Jackson

Collapse
 
graciellesampaio profile image
Gracielle Sampaio

simply amazing 👏👏👏 I loved it!!

Collapse
 
dailydevtips1 profile image
Chris Bongers

Thanks Gracielle 🙌

Collapse
 
phyesix profile image
Ibrahim Nergiz

Nice art work, keep up 👏

Collapse
 
dailydevtips1 profile image
Chris Bongers

Thanks a lot!
Working on a new serie 💖

Collapse
 
rolandixor profile image
Roland Taylor

This is amazing! Clever approach to the curve at the bottom as well!

Collapse
 
dailydevtips1 profile image
Chris Bongers

Thanks! 🙌