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.
.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