Claymorphism CSS Generator

This Claymorphism CSS Generator helps you create soft, clay-like UI blocks with rounded corners and layered shadows. Adjust the background color, preview size, border radius, shadow direction, depth, blur, and opacity, then copy the generated CSS for direct use in your project.

Box

Background Color

Width

px

Height

px

Border Radius {{ radius }}px

Shadow

Direction

Depth {{ depth }}px

Softness {{ blur }}px

X Offset

px

Y Offset

px

Blur {{ blur }}px

Outer {{ outerAlpha.toFixed(2) }}

Inner Dark {{ innerDarkAlpha.toFixed(2) }}

Inner Light {{ innerLightAlpha.toFixed(2) }}

Preview

{{ width }} x {{ height }}px

Clay

CSS

Copied!