How It Works

Neumorphism relies on a consistent base background color and a carefully balanced pair of shadows. One shadow is slightly darker than the background and placed in the direction of an imaginary light source. The other shadow is slightly lighter and placed in the opposite direction. When combined with a matching surface color, the element appears to rise out of the page (outset) or sink into it (inset/pressed).

This generator starts with your selected base color and calculates two companion colors: a highlight and a shade. The highlight is created by gently mixing the base color toward white, while the shade mixes it toward black. The “intensity” control determines how far the colors shift, which is why it is the key dial for subtle vs. pronounced Soft UI.

Step-by-step generation

• 1) Choose a base background color. The generator uses it to compute a lighter highlight color and a darker shadow color. Keeping the element background the same as the page background is what sells the illusion.
• 2) Set geometry controls. Distance controls the shadow offset, blur controls softness, and border radius controls how rounded the surface feels.
• 3) Pick a style preset. Flat uses a solid background, concave/convex add a subtle gradient, and pressed uses inset shadows to create “recessed” surfaces.
• 4) Decide on interaction states. Add hover (slightly stronger elevation) and active (pressed/inset) variants for buttons and clickable cards.
• 5) Copy or download. Export a CSS snippet that works in any modern project: plain CSS, Sass, Tailwind custom layers, or component-scoped styles.

The output is intentionally practical: it focuses on the properties you need for the Soft UI look—background, border-radius, and box-shadow. You can layer on your typography, spacing, and layout utilities as usual. If you are working in a token-based system, you can also lift the generated values into variables such as --neu-distance, --neu-blur, and --neu-radius to keep your components consistent.

Understanding the main controls

• Distance: How far the shadows are offset. Larger distance increases the perception of elevation. For small controls, keep it low to avoid cartoonish depth.
• Blur: How soft the shadow edge is. Soft UI usually uses generous blur compared to distance, which creates the “airbrushed” look.
• Intensity: How different the highlight and shade colors are from the base. Lower intensity is more realistic and more accessible.
• Radius: Affects the friendliness of the component. Higher radii feel modern and touch-friendly, but not every layout calls for pill-like corners.
• Style preset: Flat for classic neumorphism, concave/convex for subtle surface curvature, and pressed for wells and active states.

Key Features

Accurate light and shadow pairing

The generator automatically computes two shadow colors from your base background, producing a highlight and a shade that feel natural. You can adjust intensity to get anything from a barely-there elevation to a stronger, more illustrative Soft UI effect. Because the colors are derived from the same base, the shadows remain harmonious and avoid looking “pasted on.”

Multiple neumorphism styles

Pick from flat (classic), concave (inward gradient), convex (outward gradient), or pressed (inset shadows). These presets help you quickly match common UI patterns like cards, input wells, nav chips, and toggles. If you are unsure which preset to start with, try flat for containers and pressed for inputs.

Practical hover and active states

Interactive components look best when shadows subtly shift on hover and invert on active. The generator can output a sensible state set so your buttons feel tactile without extra design work. This also helps you maintain consistency: every button uses the same elevation logic instead of each one being tweaked manually.

Clean, reusable class output

Use a simple class name (for example neu-card, neu-panel, or neu-button) and the tool will generate readable CSS that is easy to maintain. The class name is sanitized to avoid broken selectors and to reduce the chance of copy/paste errors.

Preview-first workflow

Seeing the surface matters. Along with code, you get a preview sample that reflects the chosen parameters, so you can quickly decide whether the shadow is too strong, too soft, or at the wrong angle. This makes iteration faster than editing CSS in multiple files and refreshing repeatedly.

Copy and download exports

Copy the CSS to your clipboard with one click, or download a .css file for quick import. This is helpful if you are handing off styles to another developer, saving variations for later, or building a small library of neumorphism presets for your team.

Use Cases

• Modern dashboards: Create soft statistic tiles, cards, and panels that feel elevated yet minimal.
• Buttons and CTAs: Build hover/active states that mimic a real press, improving perceived responsiveness.
• Form inputs: Generate inset wells for text fields, search bars, and dropdowns—great for clean UI kits.
• Toggles and switches: Use convex surfaces for knobs and pressed tracks for the “rail” behind the toggle.
• Audio and media controls: Soft UI is a natural fit for play/pause buttons, knobs, and sliders in media apps.
• Mobile app prototypes: Quickly iterate on Soft UI components without redrawing shadows in a graphics editor.
• Component libraries: Standardize neumorphism tokens (distance, blur, intensity) across multiple components.
• Marketing and landing pages: Add a subtle premium texture to feature blocks and pricing cards without heavy imagery.
• Settings panels: Use pressed styles to create clear input zones while keeping the page calm and uncluttered.

Neumorphism works best when used selectively. A full interface of soft shadows can reduce contrast and make it harder for users to distinguish interactive elements. Many teams use Soft UI for containers and key interactive controls while keeping text, icons, alerts, and primary navigation closer to traditional high-contrast design.

Another common pattern is “hybrid neumorphism”: cards use soft elevation, but action buttons get a clearer outline or a slightly stronger shadow on hover/focus. This keeps the aesthetic while preserving usability.

Optimization Tips

Keep contrast and accessibility in mind

Soft UI is subtle by design, which means it can be easy to lose contrast—especially for text and iconography. Use neumorphism mainly for surfaces and keep text color contrast high. Consider adding a thin border, an inner highlight, or a stronger shadow on focus states so interactive elements remain obvious. If you have strict accessibility requirements, test your UI with a contrast checker and with keyboard navigation.

Match distance and blur to component size

Large cards can handle bigger shadows (larger distance and blur), while smaller controls like toggles and chips should use shorter, tighter shadows. As a quick rule of thumb, keep blur roughly 2× the distance for a gentle soft edge, then adjust intensity until the element reads clearly. If a button looks “floaty,” reduce distance; if it looks “crunchy,” increase blur.

Use pressed styles for input wells

Inset shadows are a natural match for inputs and recessed panels. They suggest depth without adding visual weight. If you use a pressed style for buttons, reserve it for the :active state to communicate a click or tap. The contrast between an outset default and an inset active state is what makes neumorphic buttons feel tactile.

Consider performance on large surfaces

Heavy blur shadows can be expensive to render if you apply them to many elements at once, especially during animations. Keep the strongest shadows on a small number of key components, avoid animating blur values, and prefer simple transitions like slight changes to offset or opacity. If you need many repeated components (for example, a table of cards), reduce blur and intensity to keep rendering smooth.

Plan for dark mode

Neumorphism on dark backgrounds can quickly become muddy if the highlight and shade are not balanced. Use lower intensity, increase blur slightly, and make sure your highlight is still visible but not glowing. In many dark themes, a very subtle border improves clarity more than a stronger shadow.

FAQ