Claymorphism CSS Effect Tutorial - How to Create Claymorphism

Learn how to create the claymorphism CSS effect. Inflated 3D elements, layered inner shadows, soft gradient fills.

AI agents add a single box-shadow and round the corners. Real claymorphism needs three shadow layers — a color-tinted outer shadow (not black), an inner highlight on the top-left for the convex shine, and an inner shadow on the bottom-right for the recessed edge. The background needs a subtle gradient matching the light direction, and the border-radius must be extreme (30px+). Agents skip every layer after the first and use gray shadows that kill the warmth.

Copy and paste this claymorphism CSS code into your AI coding agent (Claude, ChatGPT, Cursor) for instant implementation.

uicat_

Instructions you can copy-paste right into your AI coding agent.

Claymorphism

AI agents add a single box-shadow and round the corners. Real claymorphism needs three shadow layers — a color-tinted outer shadow (not black), an inner highlight on the top-left for the convex shine, and an inner shadow on the bottom-right for the recessed edge. The background needs a subtle gradient matching the light direction, and the border-radius must be extreme (30px+). Agents skip every layer after the first and use gray shadows that kill the warmth.

Examples

Inflated Card
Three shadow layers with color-tinted values create the convex 3D shape. The outer shadow matches the page hue — never plain black.
Soft Plastic
A subtle gradient reinforces the curvature. Lighter at the top where the virtual light hits, slightly darker at the bottom edge.
Clay Badge
Every element uses the same three-shadow formula. The only difference is the hue of the tinted shadows and gradient fill.