Claymorphism 3D Surface

effects

Puffy rounded physical 3D card with dual internal & external softbox shadows.

#claymorphism#clay#soft#3d#puffy

Live Interactive Preview

Claymorphism UI

Soft puffy 3D physical surface rendering.

Component Source Code

Select language in the dropdown

ClaymorphismCard.tsx

1'use client';
2
3import React from 'react';
4
5export default function ClaymorphismCard() {
6  return (
7    <div
8      style={{
9        boxShadow: '12px 12px 24px #cbd5e1, -12px -12px 24px #ffffff, inset 3px 3px 6px #ffffff, inset -3px -3px 6px #cbd5e1'
10      }}
11      className="flex flex-col items-center justify-center rounded-[32px] bg-slate-100 dark:bg-slate-800 p-6 sm:p-8 text-center max-w-xs transition-transform hover:scale-105 select-none"
12    >
13      <div className="h-14 w-14 rounded-2xl bg-blue-500 shadow-[inset_2px_2px_4px_#93c5fd] flex items-center justify-center text-white font-bold text-lg mb-3">
14        3D
15      </div>
16      <h3 className="font-extrabold text-slate-800 dark:text-slate-100 text-base">Claymorphism UI</h3>
17      <p className="text-xs text-slate-500 dark:text-slate-400 mt-1">Soft puffy 3D physical surface rendering.</p>
18    </div>
19  );
20}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/effects/ClaymorphismCard.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import Claymorphism3DSurface from '@/components/effects/ClaymorphismCard';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <Claymorphism3DSurface />
7    </main>
8  );
9}