How to add Neumorphism Card for Blogger

Hello Guys and welcome to Wolv Themes Our Tutorial today is about How to add Neumorphism Card for Blogger

Benefits :-

1. Neumorphism Card Design.
2. New design with fully new features.

How to add Neumorphism Card for Blogger :-

/* Neumorphism Card */ .neucard{display:flex;background:#e4ebf5;margin-left:30px;margin-right:65px;margin-top:45px;height:auto;width:285px;box-shadow:.3rem .3rem .6rem #c8d0e7,-.2rem -.2rem .5rem #fff;border-radius:7px;overflow:hidden;padding-bottom:70px;padding-top:70px}.neucard:hover{box-shadow:.2rem .2rem .5rem #c8d0e7,.2rem .2rem .5rem #fff}.neucard,.neucard .content,.neucard .content:before,.neucard:hover{transition:all .45s ease;-webkit-transition:all .45s ease}.neucard .content{margin-left:12px;margin-right:12px}.neucard .content:before{content:"Hover to see the content";text-align:center;position:absolute;width:285px;height:230px;background:#e4ebf5;margin-top:135px;margin-left:-12.3px;border-radius:0 0 7px 7px}.neucard .content:hover:before{content:"";background:0 0;transition:all .45s ease}.neucard .content .img,.neuimg{position:absolute;width:150px;height:150px}.neucard .content .img{margin-top:-130px;margin-left:50px;margin-bottom:-40px;box-shadow:0 5px 20px rgba(0,0,0,.2);padding:0;border:7px solid #fff;border-radius:50%}.neucard .neu-ttl{margin-top:50px;align-self:center;border-bottom:solid 1px}.neucard .content .neu-cont{width:280px;margin-bottom:-30px}.neustcs{display:flex;height:80px;width:230px;margin-left:15px;margin-top:65px;border-radius:7px;box-shadow:.3rem .3rem .6rem #c8d0e7,-.2rem -.2rem .5rem #fff;background:#e4ebf5}.neucard .content .neustcs .txt{display:flex;margin-top:20px;margin-left:60px;font-weight:700;font-size:30px}
/* Dark Mode */ .drK .neucard(background:#252526;box-shadow:.3rem .3rem .6rem #151518,-.2rem -.2rem .5rem #242529}.drK .neucard .content:hover:before(background:0 0}.drK .neucard:hover(box-shadow:inset .2rem .2rem .5rem #151518,inset -.2rem -.2rem .5rem #242529}.drK .neucard .content:before,.drK .neustcs,.drK .neucard .content .neu-cont:before(background:#252526}.drK .neustcs(color:#fffdfc;box-shadow:.3rem .3rem .6rem #151518,-.2rem -.2rem .5rem #242529}
/* Responsive */ @media screen and (min-width:769px){/* Neumorphism Card */ .neucard{width:auto;height:auto} .neucard .content .img{margin-left:-95px;margin-top:7px;width:166px;height:166px} .neucard .content .neu-ttl{margin-left:85px;margin-right:-15px;margin-top:-85px} .neucard .content .neu-cont{margin-left:90px;margin-right:;width:auto} .neucard .content:before{content:"Hover to see the content";text-align:center;position:absolute;margin-top:30px;height:200px;width:570px;background:#e4ebf5;border-radius:0 0 7px 7px;transition:all .45s ease;-webkit-transition:all .45s ease} .neucard .content .neu-cont:hover:before{content:"";background:transparent} .neustcs{margin-left:165px;margin-bottom:-20px}}

<div class="neucard">
   <div class="content">
      <div class="img">
         <img class="neuimg" src="#" />
      </div>
      <div class="neu-ttl">
         <h3>Neumorphism Card</h3>
      </div>
      <div class="neu-cont">
         <div>This awesome neumorphism card is fully developed by me !</div>
      </div>
      <div class="neustcs">
         <div class="txt">15 Posts</div>
      </div>
   </div>
</div>

Don't forget to replace # with your image url and click save.