Claymorphism
Pure-CSS 3D clay style: directional gradient, double inset shadows for relief, and hover elevation — no JavaScript required.
You'll get access to the interactive demo with a free account.
This effect is part of Effect.Labs — 811 vanilla effects, some free, some premium. Cards has 41 effects, including 6 free. Explore the category →
3 usage examples
How it works
The clay look relies on a linear gradient angled at 145° (linear-gradient(145deg, #f87171, #ef4444)): the top-left face appears lighter while the bottom-right reads as deeper — no image processing involved.
The organic relief comes from a triple box-shadow stack: an inset highlight top-left (rgba(255,255,255,.4) 2px 2px 4px inset) mimics specular reflection; an inset shadow bottom-right (rgba(0,0,0,.1) -2px -2px 4px inset) carves the material; an outer drop shadow (rgba(0,0,0,.25) 8px 8px 20px) lifts the card above the surface.
On hover, transform: translateY(-5px) simulates a released press: the card rises and the outer shadow moves further from the base (increased offset and blur). The transition: .3s eases the motion over 300 ms.
The effect is entirely script-free — the js field in the code is empty. It is applied via two stackable CSS classes (card-demo + card-clay) on any <div>, with no DOM mutation and no event listeners.
Accessibility
- prefers-reduced-motion not handled in source code: the
transition: .3son:hoverruns even when the OS signals a preference to reduce motion. Add@media (prefers-reduced-motion: reduce) { .card-clay { transition: none } }if the card is interactive. - Inner text content is natively exposed to screen readers — the effect applies no
aria-hiddento the card. - No
:focus-visiblestyle is defined in the effect: keyboard focus falls back to the browser's default outline (visible but not customized). - Text contrast: white on red
#ef4444yields a ratio of approximately 3.7:1 — passes WCAG AA for large text (≥ 18 px bold) but not for body copy. Adjust the background or text color to suit your content. - No JavaScript interaction → keyboard navigation and semantics depend entirely on the content you place inside the card.
Browser compatibility
Uses standard CSS3: box-shadow inset, linear-gradient, border-radius, transform — supported in all modern browsers since 2012.
On very old browsers (IE9 and below, out of scope), box-shadow inset is not rendered: the card stays visible with a flat background and rounded corners. No JS errors, the UI remains functional.
The code
HTML structure to paste into your page (CSS + JS available with a premium account):
<div class="demo-preview">
<div class="card-demo card-clay">
<!-- Your content: icon, title, description -->
</div>
</div>Full HTML + CSS + JS, copy-paste ready — with hundreds of premium effects.
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
| background (gradient) | linear-gradient(145deg, #f87171, #ef4444) | The two hex colors define the clay hue: first = lit face, second = depth. Also tint the outer box-shadow (rgba(r,g,b,.25)) to match. |
| border-radius | 30px | Card rounding. 30 px gives the 'soft blob' claymorphism look. Drop to 16–20 px for a subtler result; 50% for a round badge or avatar. |
| box-shadow inset highlight | rgba(255,255,255,.4) 2px 2px 4px inset | Opacity of the top-left white inner glow. .6 = shiny (plastic); .15 = matte (rubber). |
| box-shadow inset shadow | rgba(0,0,0,.1) -2px -2px 4px inset | Bottom-right inner shadow that carves the material. Increase to .2–.3 for more pronounced relief. |
| box-shadow outer | rgba(0,0,0,.25) 8px 8px 20px | Ambient elevation. Adjust offset (8px) and blur (20px); tint with the card color for a colored shadow. |
| translateY (hover) | -5px | Lift distance on hover. -8 px = snappy spring; -2 px = subtle; 0 to disable elevation on non-interactive elements. |
| transition | .3s | Hover animation duration. .15 s = snappy; .5 s = slow and creamy. |
FAQ
js field in the code is empty — no script is loaded or needed. Add the classes card-demo and card-clay to any div and it works in any context (React, Vue, plain HTML).linear-gradient(145deg, #f87171, #ef4444) inside the .card-clay rule. For a convincing result, also tint the outer box-shadow layer: replace rgba(0,0,0,.25) with rgba(r,g,b,.25) using your primary color's RGB components.card-clay to a button, badge, or avatar. Adjust border-radius (50% for a circle, 12 px for a button) and reduce the hover translateY to -2 px on small elements so the lift stays proportional to their size.
