Style Detail - Neomorphism

About This Style

A style that uses soft shadows and highlights to create an illusion of elements extruding from or receding into the background, giving a soft, plastic-like feel.

Neomorphism, a successor to Skeuomorphism and a contrast to Flat Design, aims for a soft, tactile interface. It relies heavily on careful use of shadows and light to create its signature extruded or pressed look.

Main Features:

Soft Shadows & Highlights: Typically uses two shadows – one light (top-left) and one dark (bottom-right) – to create the illusion of depth.
Extruded/Pressed Look: Elements appear to be made of the same material as the background, either pushed out or pressed in.
Monochromatic or Limited Palette: Often uses subtle variations of a single color, or very desaturated colors.
Rounded Corners & Soft Shapes: Sharp edges are rare; elements are usually soft and rounded.
Low Contrast: The contrast between elements and the background is often minimal, which can sometimes pose accessibility challenges.

Example AI Prompt

Design a web interface using Neomorphism. Elements should appear as if they are extruding from the background or pressed into it, using subtle inner and outer shadows. Use a monochromatic color scheme with soft, rounded shapes. The background color should be a light grey like #e0e0e0. For extruded elements, use a top-left light shadow (e.g., -5px -5px 10px #ffffff) and a bottom-right dark shadow (e.g., 5px 5px 10px #bebebe). For pressed elements, reverse the shadow directions or use inset shadows. Ensure text has sufficient contrast.

和右下角深色阴影（例如 5px 5px 10px #bebebe）。对于凹陷的元素，反转阴影方向或使用内嵌阴影。确保文本具有足够的对比度。）

Theme CSS Snippets

The following are the core CSS variable definitions (body.theme-neomorphism) for applying this Neomorphism style as a global theme. Full style rules are defined in the main style.css and card-specific neomorphism-card.css files:


/* Core Neomorphism Theme Variables */
body.theme-neomorphism {
    --neo-bg: #e0e0e0;
    --neo-text-color: #5c5c5c;
    --neo-shadow-light: #ffffff;
    --neo-shadow-dark: #a3b1c6; /* Adjusted for better visibility than pure #bebebe on #e0e0e0 */

    --page-bg: var(--neo-bg);
    --text-color: var(--neo-text-color);
    --heading-color: #484848; /* Darker for headings */
    --link-color: #337ab7;
    --link-hover-color: #23527c;
    
    --border-color: #d1d1d1;
    
    --card-bg: var(--neo-bg);
    --card-shadow-extrude: 8px 8px 15px var(--neo-shadow-dark), -8px -8px 15px var(--neo-shadow-light);
    --card-shadow-press: inset 5px 5px 10px var(--neo-shadow-dark), inset -5px -5px 10px var(--neo-shadow-light);
    
    --header-bg: var(--neo-bg);
    --header-text-color: var(--neo-text-color);
    
    --button-bg: var(--neo-bg);
    --button-text-color: var(--neo-text-color);
    --button-shadow: 5px 5px 10px var(--neo-shadow-dark), -5px -5px 10px var(--neo-shadow-light);
    --button-hover-shadow: 3px 3px 7px var(--neo-shadow-dark), -3px -3px 7px var(--neo-shadow-light);
    --button-border: 1px solid #cacaca;
    
    --prompt-bg: #d1d1d1; /* Pressed look for prompt */
    --prompt-text-color: #666;
    --prompt-shadow: inset 3px 3px 5px var(--neo-shadow-dark), inset -3px -3px 5px var(--neo-shadow-light);
    
    --base-font: var(--font-pop); /* Poppins is good for soft UIs */
    --heading-font: var(--font-pop);
    
    --card-border-radius: 20px;
    --button-border-radius: 10px;
}

Note: The key to Neomorphism lies in the precise use of shadows to create a soft effect, as if elements are emerging from or receding into the background. Colors are usually kept simple to emphasize form.

Visual Example

Button

This is a neomorphic card.

Input Field

Resource Download (Example)

Download a ZIP package containing more complete CSS definitions for this style (if available).

(No specific ZIP for Neomorphism in this example)