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_

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

👥 Ideal for solo developers, teams, and cross-company projects

Learn more