Style Detail - Claymorphism

See this style applied to a real page — identical content, different stylesheet.

About This Style

Claymorphism, or clay style, is an interface design style that pursues a soft, friendly, and slightly 3D feel. It simulates the texture of clay or play-dough, using rounded shapes and inner/outer shadows to create a light, cute three-dimensional effect, distinct from the harder feel of Neumorphism.

This style usually gives an approachable, playful, or modern cartoonish feeling, suitable for applications and websites that need to create a relaxed and fun atmosphere.

Main Features:

Rounded Shapes: Elements (like cards, buttons) usually have very smooth corners, mimicking the form of molded clay.
Soft Inner & Outer Shadows:
- Outer Shadow: Usually a soft, diffuse dark shadow, making the element appear slightly elevated above the background.
- Inner Shadow: Usually a soft, diffuse light-colored (or brighter shade of the same color) shadow, simulating light reflection on the element's edge, enhancing its 'puffy' feel.
Smooth Surfaces: Element surfaces are typically smooth, without excessive texture, and colors are often solid or very soft gradients.
Soft & Friendly Colors: Often uses pastel palettes, soft bright colors, or neutral tones, avoiding overly harsh or deep colors.
Slight 'Floating' Feel: Elements look like they are gently floating on the background, rather than completely flat or deeply embedded.
Playful Interactions: When a button is pressed, the shadow might invert (outer shadow becomes inner shadow), simulating a pressed effect.

Sample AI Prompt

Design a user interface with a Claymorphism style. Use a light, friendly background color (e.g., #e0e5ec). Elements like cards and buttons should have heavily rounded corners (e.g., border-radius: 20px or more). Apply a soft outer shadow (e.g., 3px 3px 5px rgba(0,0,0,0.1)) and a soft inner shadow (e.g., inset -3px -3px 7px rgba(255,255,255,0.7)) to create a "puffy" or "clay-like" 3D effect. Use a sans-serif font like 'Poppins'. Colors for elements should be soft and appealing (e.g., pastel blues, pinks, or light earthy tones like #e8c3a0). Buttons should have a distinct pressed state where shadows might invert.

(Chinese Explanation: Design a user interface with a Claymorphism style. Use a light, friendly background color (e.g., #e0e5ec). Elements like cards and buttons should have heavily rounded corners (e.g., border-radius: 20px or more). Apply a soft outer shadow (e.g., 3px 3px 5px rgba(0,0,0,0.1)) and a soft inner shadow (e.g., inset -3px -3px 7px rgba(255,255,255,0.7)) to create a 'puffy' or 'clay-like' 3D effect. Use a sans-serif font like 'Poppins'. Colors for elements should be soft and appealing (e.g., pastel blues, pinks, or light earthy tones like #e8c3a0). Buttons should have a distinct pressed state where shadows might invert.)

Theme CSS Code Snippet

Below is the core CSS code for applying this Claymorphism style as a global theme (body.theme-claymorphism). It defines soft colors, rounded corners, and the signature inner and outer shadows:


/* ==========================================================================
   18. Claymorphism Theme
   ========================================================================== */

body.theme-claymorphism {
    /* Base colors for Claymorphism */
    --clay-bg: #e0e5ec; /* Light greyish blue, common for claymorphism */
    --clay-text: #5a6674; /* Muted text color */
    --clay-heading: #3d4a5a; /* Slightly darker heading */
    --clay-accent: #a3b1c6; /* Accent color, can be used for hovers or secondary elements */
    --clay-highlight: #ffffff; /* Highlight color, often for inner shadows */
    
    /* Shadow colors - adjust opacity and color as needed */
    --clay-shadow-color-dark: rgba(0, 0, 0, 0.1); 
    --clay-shadow-color-light: rgba(255, 255, 255, 0.7);

    /* Claymorphism shadows */
    --clay-shadow-inset: inset 2px 2px 5px var(--clay-shadow-color-dark), 
                         inset -3px -3px 7px var(--clay-shadow-color-light);
    --clay-shadow-outset: 3px 3px 5px var(--clay-shadow-color-dark), 
                          -3px -3px 7px var(--clay-shadow-color-light);
    /* Stronger outset shadow for hover states */
    --clay-shadow-outset-hover: 5px 5px 10px var(--clay-shadow-color-dark), 
                                -5px -5px 10px var(--clay-shadow-color-light);

    /* Apply Claymorphism variables to theme properties */
    --page-bg: var(--clay-bg);
    --page-bg-gradient: none;
    --text-color: var(--clay-text);
    --heading-color: var(--clay-heading);
    --link-color: var(--clay-heading); /* Links can use heading color */
    --link-hover-color: var(--clay-accent);
    
    --border-color: transparent; /* Claymorphism usually avoids hard borders */
    
    --card-bg: var(--clay-bg); /* Cards use the same bg as page, relying on shadows for definition */
    --card-shadow: var(--clay-shadow-outset);
    --card-hover-shadow: var(--clay-shadow-outset-hover);
    
    --header-bg: var(--clay-bg);
    --header-text-color: var(--clay-heading);
    --header-shadow: var(--clay-shadow-outset); /* Header can also have clay effect */
    
    --footer-text-color: var(--clay-text);
    --footer-bg: var(--clay-bg);
    /* Footer might not need a shadow or a very subtle one */
    
    --button-bg: var(--clay-bg); /* Buttons also use page bg */
    --button-text-color: var(--clay-text);
    --button-hover-bg: var(--clay-accent); /* Or change shadow on hover */
    --button-border: none;
    --button-shadow: var(--clay-shadow-outset);
    --button-hover-shadow: var(--clay-shadow-outset-hover); /* Or use inset for pressed state */
    
    --button-secondary-bg: var(--clay-bg);
    --button-secondary-text-color: var(--clay-text);
    --button-secondary-hover-bg: var(--clay-accent);
    --button-secondary-border: none;
    /* Secondary buttons might have slightly different shadow or be flatter */

    --prompt-bg: var(--clay-bg); /* Prompt area can be inset */
    --prompt-text-color: var(--clay-text);
    --prompt-shadow: var(--clay-shadow-inset); /* Inset shadow for prompt area */
    
    --base-font: var(--font-pop); /* Poppins is a good fit */
    --heading-font: var(--font-pop);
    
    --card-border-radius: 20px; /* Significant rounding */
    --button-border-radius: 15px; /* Also very rounded */
}

/* Specific adjustments for the Claymorphism theme */
body.theme-claymorphism .card {
    border: none; /* Remove default border if any */
}

body.theme-claymorphism .btn {
    transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out, background-color 0.15s ease-in-out;
}
body.theme-claymorphism .btn:active { /* Pressed state */
    box-shadow: var(--clay-shadow-inset);
    transform: translateY(1px); /* Slight press down effect */
}

body.theme-claymorphism h1,
body.theme-claymorphism h2,
body.theme-claymorphism h3 {
    /* Optional: Add subtle text shadow to make headings pop a bit from the clay surface */
    text-shadow: 1px 1px 1px var(--clay-shadow-color-light); 
    font-weight: 600; /* Poppins often looks good semi-bold */
}

/* Ensure prompt/code areas within sections get the inset shadow */
body.theme-claymorphism .style-detail-section pre {
    background-color: var(--prompt-bg);
    color: var(--prompt-text-color);
    box-shadow: var(--prompt-shadow);
    border-radius: var(--button-border-radius); /* Match button radius for consistency */
    border: none;
}

Note: The key to Claymorphism is the clever use of inner and outer shadows and very rounded corners. Adjusting the color, blur, and offset of the shadows can create different 'clay' textures.

Resource Download (Example)

Download a zip file containing a more complete CSS definition for this style.

Download claymorphism.zip