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_

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay