An all-in-one neumorphism css stylesheet.
Is pretty simple to use!
First, to get started you have to include the stylesheet to your HTML file.
You can do this by copying the contents of neumorphic.css to your website, or by adding this script which automatically adds it to your website.
<script>
fetch("https://raw.githubusercontent.com/ZXMushroom63/NeumorphicCSS/main/neumorphic.css").then((x)=>{x.blob().then((y)=>{y.text().then((z)=>{var s=document.createElement("style");s.innerHTML=z;document.head.appendChild(s);});});});
</script>Now that the stylesheet is included, you have to make a container for the elements.
<div class="neu container">...</div>Optionally, if your whole website will be using this, set the class of your
<html> tag to "neu"Then, mix and match with a variety of elements! Put them in the container.
| Feature | HTML |
|---|---|
| A panel |
<div class="neu panel">
|
| An inset panel |
<div class="neu insetPanel">
|
| A button |
<button class="neu">...</button>
|
| Most input elements |
<input type="..." class="neu">
|
| Switches |
<input type="checkbox" class="neu switch">
|
| Textareas |
<textarea class="neu">...</textarea>
|
| Concave elements |
<* class="neu concave">...</*>
|
| Convex elements |
<* class="neu convex">...</*>
|
| Tables |
<table class="neu">...</table>
|
| Corners |
<* class="neu squareCorners">...</*>
OR
<* class="neu roundCorners">...</*>
|
| Inset & Outset Forcing |
<* class="neu outset">...</*>
OR
<* class="neu inset">...</*>
|
| Selects |
<select class="neu">...</select>
|
| Small or Circular Buttons |
<button class="neu smallButton">...</button>
OR
<button class="neu smallButton circle">...</button>
|
| Corner Roundness |
<* class="neu smallButton">...</*>
OR
<* class="neu smallButton circle">...</*>
|
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent