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)
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 👏
Nice, that was my goal so happy to hear it worked out ✊
Got a few more coming, and collecting inspiration for a new set.
You are welcome!
I am happy to hear that! Bring it on! 🤓
is this a series? can we get them linked together so i can flip between cuz i’m lazy?
I will link them together today 💖
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🎉
Omg thank you so much 🙌
Looking forward to your brother also making these amazing logos in CSS 💖
wow
🙌🙌🙌
Nice.
The two parallel lines before you arrived at the Netflix logo sort of remind me of Parallels: google.com/search?q=parallels+logo
Damn, I just did two logo's in one 👀
nicely done
Thanks Waylon 🙌
Lovely
Glad you enjoyed it Jackson
simply amazing 👏👏👏 I loved it!!
Thanks Gracielle 🙌
Nice art work, keep up 👏
Thanks a lot!
Working on a new serie 💖
This is amazing! Clever approach to the curve at the bottom as well!
Thanks! 🙌