Keine Werbung mögen? Gehen Werbefrei Heute 

CSS Neumorphism Generator

FarbeEntwickler

ANZEIGE Entfernen?

EINGANG

Automatischer Prozess

Vorgabestile

Vorgabe

Grundfarbe

Hintergrund

The background color of both the element and its surroundings

Form

Formtyp

Element Size (px): 200

Radius der Eckenabrundung (px): 50

Shadow

Distance (px): 20 How far the shadows extend from the element

Intensity (%): 15 Contrast between light and dark shadows

Weichzeichnen (px): 60

Light Angle: 145 Direction the light source comes from (degrees)

AUSGABE

Client-Seite

Live-Vorschau

Generierter CSS-Code

ANZEIGE Entfernen?

Führung

CSS Neumorphism Generator

Build soft, extruded “neumorphic” UI elements without hand-tuning two opposing box-shadows. Pick a base color, choose a shape (flat, concave, convex, or pressed), drag the sliders for distance, intensity, blur, and light angle, then copy the generated CSS straight into your project.

Nutzung

Pick a background color. The same color is used for the element and the surrounding canvas — that is what makes neumorphism work.
Choose a shape: Wohnung, Concave (subtle dip in), Convex (subtle pop out), or Innenbereich (pressed in).
Passen Sie Abstand und Light Angle to set the shadow direction.
Tune Intensität und Blurring until the surface feels right.
Copy the CSS, or toggle HTML + CSS anzeigen for a paste-ready snippet.

Funktionen

Live-Vorschau — every slider change updates the rendered element instantly.
Five built-in presets — Soft Light, Strong Light, Soft Dark, Strong Dark, and Pressed.
Auto-derived shadow colors — light and dark shadows are mathematically lightened/darkened from your base color so the effect always matches.
Concave and convex gradients — the tool generates a matching linear gradient for the element’s surface in those modes.
Inset (pressed) mode — for buttons that look “pushed in” on click.
Light angle control — rotate the virtual light source from 0° to 360°.
Copy-ready CSS — clean output with both the box-shadow declaration and the surface background.

 Häufig gestellte Fragen

What is neumorphism?

Neumorphism (also called soft UI) is a visual style where elements appear to extrude from or sink into the background. It is achieved with two box-shadows of equal blur — one lighter shadow on the side facing the light and one darker shadow on the opposite side — both rendered against a background of the same color as the element itself.
Why does the element have to share the background color?

Neumorphism relies on the illusion that the shape is part of the same surface as the background. If the element uses a different color it stops looking like an extrusion and instead reads as a flat tile with two random shadows, which breaks the effect.
Are neumorphic interfaces accessible?

They have well-known accessibility trade-offs. Because all elements share the background color, contrast against text and other UI is often very low, which can fail WCAG contrast requirements and confuse screen-magnifier users. Use neumorphism for decorative surfaces and keep critical interactive elements high-contrast.
How is the light angle related to the shadow offsets?

The two shadow offsets are derived from the light angle using basic trigonometry: offsetX = cos(angle) × distance, offsetY = sin(angle) × distance. The opposite shadow is placed at the negated offsets so the light and dark sides always sit on opposite edges, matching where a real light source would cast them.

Möchten Sie werbefrei genießen? Werde noch heute werbefrei



 Erweiterungen installieren

IO-Tools zu Ihrem Lieblingsbrowser hinzufügen für sofortigen Zugriff und schnellere Suche

恵 Die Anzeigetafel ist eingetroffen!

Anzeigetafel ist eine unterhaltsame Möglichkeit, Ihre Spiele zu verfolgen. Alle Daten werden in Ihrem Browser gespeichert. Weitere Funktionen folgen in Kürze!

ANZEIGE Entfernen?