Netflix Logo With CSS

Hello Folks! today I'am going to share with you a "Netflix" logo design with CSS

code is easy and simple even 10y/o child could try.

 

Let's see our Source Code:

If you know Html and CSS very well then this post is just a piece of cake with you

not and hard and fast coding is applied just span tag i choose and design it accordingly.

Index.html

 <div class="container">

    <span></span>

    <span></span>

    <span></span>

  </div> 

Style.CSS

 body{

background:#26242e;

}

.container{

  position:absolute;

  top:30%;

  left:50%;

  display:flex;

  width:120px;

  height:200px;

  overflow:hidden;

}

span{

  position:absolute;

  width:40px;

  height:200px;

  background:#d81f26

}

span:nth-child(1){

  right:0;

}

span:nth-child(2){

  left:40px;

  z-index:1;

  transform:skew(22deg);

  box-shadow:0 0 15px #000;

} 

Explanation of Code:

.Container:

In ".container" we just center our <div> and adjust its position,height and width.

Span:

In "span" we adjust height & width of letter 'N' to look like Netflix logo and in the end we just add box-shadow to enhance clarity.

Output

I hope you guys like it, if this post was helpful to you so let us know in the comment section.