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

Box

▼ Size (for preview only)

px
px

px

Shadow

▼ Shadow Direction

Additional Setting

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.

\ Share on SNS /

Sponsored Links

Tools

CSS Generators

UI Parts Generators

HTML Converters

Image Generators