Claymorphism CSS Generator
Generates CSS to implement claymorphism, a style characterized by a clay-like three-dimensionality and softness.
Three-dimensionality, shadow direction, etc. can be customized.
The output CSS code can be easily used by copy and paste.
Sponsored Links
Customization
Preview
CSS Code
.clay {
background-color: #62CDFF;
border-radius: 40px;
box-shadow: 12px 12px 18px rgba(0, 0, 0, 0.3), inset -12px -12px 18px rgba(0, 0, 0, 0.3), inset 12px 12px 18px rgba(255, 255, 255, 0.6);
}Notes
- It is intended for use with modern browsers and may contain CSS properties that are not supported by IE or older versions of browsers.
- The reset CSS of this site is based on “modern-normalize.css”. Depending on the reset CSS and other stylesheets loaded in your project, there may be differences from the preview appearance.
Sponsored Links
