Pure CSS Logos: Netflix

Hey, hope you are doing well! This is our second article.

We can only learn CSS by practicing. CSS is something that you should regularly practice as a Web Developer. So, to learn CSS in advanced way, we will make different company logos. So, let’s get started with our first one.

Netflix Logo

Step 1: HTML

<div class="netflix"></div>

In HTML, we only have a div with class “netflix”. Now, let us style it with CSS.

Step 2: CSS

The basic page styling:

body {
  display: grid;
  place-items: center;
  background: black;
  min-height: 100vh;
}

Styling the main logo:

.netflix {
  height: 15rem;
  width: 3rem;
  border-left: 3rem solid #e50914;
  border-right: 3rem solid #e50914;
  position: relative;
}
.netflix:before {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background: #e50914;
  transform: skewX(21.5deg);
  box-shadow: 0 0 30px black;
}
.netflix:after {
  content: "";
  width: 15rem;
  height: 2rem;
  background: black;
  border-radius: 50%;
  display: block;
  position: absolute;
  left: -200%;
  top: 98%;
}

You can refer to the below Codepen for preview:

Netflix Logo

So, this is it. Thanks for Reading 😊

Don’t forget to like and follow for more…

Instagram: @coding_dev_

Support: https://www.buymeacoffee.com/codingdev