Neumorphism generator
Build neumorphic styles visually: background color, raised / pressed / flat shapes, size, radius, distance, blur, intensity and light direction (dark theme included), with optional text and icon, a live preview plus CSS and HTML output.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Live preview
Highlight and shadow colors are derived from the background, so changing it recolors everything
Presets
Click a preset to apply it
CSS code
.neumorphic {
display: flex;
align-items: center;
justify-content: center;
width: 160px;
height: 160px;
background: #E0E5EC;
border-radius: 32px;
box-shadow: -12px -12px 24px #F0F2F6, 12px 12px 24px #86898E;
color: #4E5053;
font-size: 15px;
font-weight: 500;
}<div class="neumorphic"> <span>Neumorphism</span> </div>
What this tool does
- Stop hand-editing CSS while tweaking a component: drag the sliders for background, radius, distance, blur and intensity, watch the live preview, then copy the CSS.
- Get all three states: raised uses two outer shadows, pressed uses inset shadows and flat outputs box-shadow: none, which makes button states easy.
- Keep the palette on-brand: both the highlight and the shadow are derived from the background colour, so changing the background recolours everything at once.
- Adapt to dark themes: with the dark theme toggle the highlight becomes subtler and the shadow heavier, so a raised shape does not disappear on a dark background.
Example
Input
Background: #E0E5EC Shape: raised Radius: 32px Distance: 12px Blur: 24px Intensity: 100 Light: top left Text: "Card"
Output
.neumorphic {
display: flex;
align-items: center;
justify-content: center;
width: 160px;
height: 160px;
background: #E0E5EC;
border-radius: 32px;
box-shadow: -12px -12px 24px #F0F2F6, 12px 12px 24px #86898E;
color: #4E5053;
font-size: 15px;
font-weight: 500;
}The highlight #F0F2F6 is the background mixed with 50% white and the shadow #86898E is mixed with 40% black; both come from the intensity setting and are recomputed whenever the background changes.
Frequently asked questions
How are the highlight and shadow colours computed?
They are derived, not hand-picked: the highlight mixes the background towards white and the shadow towards black, with the mix ratio driven by intensity. At intensity 100 the cap is 50% white and 40% black; in dark theme it becomes 25% white and 75% black so raised shapes stay visible on dark backgrounds.
Why does changing the light only move the shadows?
The light direction only flips the two shadow offsets, never the colours. Top-left puts the highlight up and to the left (negative offset) with the shadow at the bottom right; top-right mirrors that. It is the only knob that says where the light comes from.
Does the background have to be hex?
Yes. #RGB and #RRGGBB are supported, and 4-digit or 8-digit forms are tolerated (the first six digits are read and normalised to uppercase hex). rgb(), hsl() or colour names raise "colours must be valid HEX values".
Why is there no shadow in the flat shape?
That is intentional: the flat shape outputs box-shadow: none so it can serve as a contrast reference or as a plain card that still borrows the radius and background colour. If you want a faint lift, switch back to raised and reduce the distance.
What does the generated CSS need to look right?
Neumorphism assumes the element has the same colour as its parent surface, so matching the background to the container works best and pure white or black backdrops flatten the effect. The CSS and HTML snippets are generated locally and never uploaded.
Keywords：neumorphism新拟态拟物化soft uibox-shadowcss 生成器扁平化暗色主题阴影ui 设计