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.

（中文解释：使用新拟物化设计一个网页界面。元素应看起来像是从背景中挤压出来或压入背景中，使用微妙的内外阴影。采用单色配色方案和柔和的圆角形状。背景颜色应为浅灰色，如 #e0e0e0。对于凸起的元素，使用左上角浅色阴影（例如 -5px -5px 10px #ffffff）和右下角深色阴影（例如 5px 5px 10px #bebebe）。对于凹陷的元素，反转阴影方向或使用内嵌阴影。确保文本具有足够的对比度。）

Theme CSS Snippets

以下是将此新拟物化风格应用为全局主题的核心 CSS 变量定义 (body.theme-neomorphism)。完整的样式规则在主 style.css 和卡片特定的 neomorphism-card.css 文件中定义：


/* 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;
}

注意：新拟物化风格的关键在于阴影的精确运用，以创造出柔软、仿佛从背景中浮现或凹陷的效果。色彩通常保持简约，以突出形态。

Visual Example

Button

This is a neomorphic card.

Input Field

Resource Download (Example)

下载包含此风格更完整 CSS 定义的压缩包 (如果可用)。

(No specific ZIP for Neomorphism in this example)