Neumorphism and claymorphism CSS generator
Generate soft UI neumorphism and claymorphism surfaces with light angle, depth and intensity, and export CSS, tokens or Tailwind. Free to use, no account.
Choose the primitives library your project already uses. Both look the same: your theme, not the variant, controls colors, shape, type and motion.
About this generator
Soft UI surfaces are made of paired light and dark shadows. This generator exposes the light angle, distance, blur and intensity, switches between raised and pressed forms, and adds an inner highlight for the clay look. Concave and convex fills are available too.
Soft shadows often leave text with too little contrast, so the generator warns when text on the surface fails WCAG AA and suggests a better text token. Export CSS, design tokens or a Tailwind class.
How to use it
- Pick neumorphism or claymorphism.
- Set the light angle, distance, blur and intensity.
- Switch between raised and pressed.
- Check the contrast warning, then copy the CSS.
This generator is also a component of the kit: Generator Neumorph Clay, installed as source in your project.
Want this inside your project?
Agentic UI Kit installs this generator and the other 1156 components as source files, with one theme for all of them. One-time license, unlimited projects.