Styling

Styling

.raised .engraved

The CSS file contains helper classes that provide you with the signature neumorphism look. you can just apply a .raised class to any element and have it look like what the class name suggests. You can control the level of the effects by adding -0 to -9 at the end of .raised class where .raised-0 is flat nad .raised-9 is maximum effect.

.raised
.raised-0
.raised-1
.raised-2
.raised-3
.raised-4
.raised-5
.raised-6
.raised-7
.raised-8
.raised-9
.engraved
.engraved-0
.engraved-1
.engraved-2
.engraved-3
.engraved-4
.engraved-5
.engraved-6
.engraved-7
.engraved-8
.engraved-9

.round

A lot of times having rounded corners helps the neumorphism design, making it feel softer and more friendly. The .round class can help with this effect, by default it applies 1em border radius to all corners, you can adjust the radius by changing the --sc-border-radius css variable.

:root {
  --sc-border-radius: 30px; /* applies 30px border-radius */
}

I didn't bother adding the corner-specific classes such as .round-top-left, please let me know if you need it by creating a GitHub issue

Edit this page