Preview
Well done!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Well done!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Info card title
Some quick example text to build on the card title and make up the bulk of the card's content.
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
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.