DEV Community

Cover image for Pure CSS Logo: Netflix
Tilak Jain
Tilak Jain

Posted on

Pure CSS Logo: Netflix

Hey, hope you are doing well!

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

Netflix Logo using pure CSS

Step 1: HTML

<div class="netflix"></div>
Enter fullscreen mode Exit fullscreen mode

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

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

You can refer to the below Codepen for preview:

So, this is it. Thanks for Reading 😊

Don’t forget to like and follow for more…

Instagram: coding_dev_

Support: coding_dev_

Top comments (0)