Inflated, puffy, 3D UI. Multi-layer shadows for depth, candy colors, generous border-radius. Press the buttons.
Claymorphism makes UI elements look inflated, puffy, and three-dimensional — like they're made of clay or rubber. Buttons and cards appear to have physical volume and weight. This style creates a playful, friendly, and approachable feel, making it popular for apps targeting general consumers, productivity tools, and any product that wants to feel fun rather than corporate.
The 3D effect is created with multiple box-shadows: a bottom shadow in a darker version of the element's color (simulating the underside), and a larger soft glow shadow around the whole element. Candy colors (soft pastels or vivid saturated colors) are typical. High border-radius (24px+) on everything. When the button is clicked, the bottom shadow shrinks, making it feel like it's being physically pressed down.
4 tasks · 2 in progress
Design a claymorphism task management app UI on a soft #F0F4FF background. Create 3D-looking cards and buttons using multi-layer box-shadows: box-shadow: 0 8px 0 #4B44CC, 0 14px 20px rgba(108,99,255,0.35) for a raised purple button. Use candy colors: soft purple #6C63FF, coral #FF6B6B, mint #4ECDC4. All elements have border-radius: 20px minimum. Add pressed animation on buttons: transform: translateY(4px) with reduced shadow to simulate physical pressing. Background is a soft light blue-gray.