Preview

Header
Info card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Light card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Neumorphic Settings

neumorphic class configuration

Place the generated CSS in your application code.



.neumorphic {

  /* for use on background-color: #e0e0e0; */
  border-radius: 0.5rem;
  box-shadow: 10px 10px 22px 3px #b2b0b1, -10px -10px 22px 3px #f3f1f3;
  background: linear-gradient(151deg, #b2b0b1, #f3f1f3);
  
}


Apply the neumorphic class where needed. Jumbotron, for example:

  
    
<div class="neumorphic jumbotron">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple jumbotron...</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing...</p>
  <a class="btn btn-primary btn-lg" href="." role="button">Learn more</a>
</div>

  

Visit https://github.com/fantasyui-com/neumorphism for more.