Style Detail - Claymorphism

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 plasticine, using rounded shapes and inner and outer shadows to create a light, cute three-dimensional effect, which is different from the tough feeling of Neumorphism.

This style usually gives people an approachable, childlike, or modern cartoon feeling, suitable for applications and websites that need to create a relaxed and interesting atmosphere.

Main Features:

Rounded Shapes: Elements (such as cards, buttons) usually have very smooth corners, imitating the shape of clay after being kneaded.
Soft Inner & Outer Shadows:
- Outer Shadow: Usually a soft, diffuse dark shadow, making the element look like it is slightly floating above the background.
- Inner Shadow: Usually a soft, diffuse light-colored (or brighter in the same color family) shadow, simulating the reflection of light on the edge of the element and enhancing its "puffy" feeling.
Smooth Surfaces: Element surfaces are usually smooth, without too much texture, and colors are mostly solid or very soft gradients.
Soft & Friendly Colors: Often uses pastel colors, soft bright colors, or neutral colors, 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 may be inverted (outer shadow becomes inner shadow), simulating the effect of being pressed.

Example 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.

(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 Snippets

The following is the core CSS code (body.theme-claymorphism) to apply this Claymorphism style as a global theme. It defines soft colors, rounded corners, and iconic 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 lies in 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 package containing a more complete CSS definition for this style.

Download claymorphism.zip