Neumorphism generator for soft UI CSS
This neumorphism generator builds soft UI surfaces from one base color and gives you the CSS to copy. It derives a light highlight and a dark shadow for you, lets you switch between flat, pressed, concave and convex shapes, and checks contrast as you edit. 66Colorful is free, runs in your browser and needs no signup.
Neumorphism (soft UI) makes an element look extruded from, or pressed into, a surface of the same color. The effect depends on two paired shadows, so getting the colors and offsets right by hand is slow. The tool does that math and shows the result live.
How to use the neumorphism generator
- Enter a Base surface color as a HEX value or pick it with the color picker. The default is
#E0E5EC. - Choose a Shape variant: Flat, Pressed, Concave or Convex.
- Click a Light source arrow (top left, top right, bottom right or bottom left) to set where the light comes from.
- Adjust Size, Corner radius, Distance, Blur and Intensity until the preview looks right.
- Set the Label text color and edit the label text directly in the preview.
- Read the edge and label contrast notes under the preview, then pick the CSS, Tailwind CSS or SCSS tab and copy the code.
Neumorphism generator controls and settings
The settings panel has one color field for the surface, one for the label, a shape selector, a light direction pad and five sliders. Each control changes the preview immediately.
- Base surface color: the color of the page and the element. Highlight and shadow colors are calculated from it.
- Light source: four corner positions. The highlight faces the light and the dark shadow falls away from it.
- Size (60 to 300 px) and Corner radius (0 to 150 px): set the shape from a sharp square to a full circle.
- Distance (2 to 50 px): how far each shadow is offset. Larger values make the element look taller.
- Blur (2 to 100 px): how soft the shadow edges are.
- Intensity (5 to 50 %): how far the highlight and shadow colors move away from the base lightness.
- Derived colors: Base, Highlight and Shadow swatches under the preview. Click one to copy its HEX value.
- Quick actions: Copy CSS, Copy Tailwind, Reset and Share link, which copies a URL that restores your settings.
Share link is useful for handing a design to a teammate. Reset returns all controls to their defaults. Nothing needs to be installed or saved to an account.
How neumorphism box-shadow works
A neumorphism box-shadow combines two shadows with opposite offsets: a lighter one facing the light and a darker one on the far side. Because the element and its background share one color, only the shadows define the shape. The MDN box-shadow reference documents the syntax: x offset, y offset, blur radius and color, with an optional inset keyword.
Neumorphism box-shadow worked example
With the base #E0E5EC, Flat shape, light from the top left, Distance 20 px, Blur 40 px and Intensity 15 %, the tool derives a highlight of #FAFFFF and a shadow of #C3C8CF. The dark shadow is offset down and right, and the highlight up and left:
box-shadow: 20px 20px 40px #C3C8CF, -20px -20px 40px #FAFFFF;The highlight is limited by white. On very light bases it clips toward #FFFFFF, so the light side becomes harder to see.
Why neumorphism shadows are derived from lightness
The tool shifts the perceptual lightness of your base color up and down while keeping its hue and chroma. That keeps the tinted shadows consistent with the surface, so a blue-gray base gets blue-gray shadows instead of muddy black ones. It also helps light and dark bases get comparable edges. Use a tint and shade scale if you want to explore other lightness steps of the same color.
Which neumorphism shape variant should you use?
Use Flat for cards and containers, Pressed for inputs and active states, and Concave or Convex for buttons that need a gentle curved surface. The four variants differ in shadow direction and background fill.
| Variant | Shadows | Background | Best for |
|---|---|---|---|
| Flat | Outer, raised | Solid base color | Cards, panels, icon tiles |
| Pressed | Inset, sunken | Solid base color | Text fields, toggled-on buttons |
| Concave | Outer, raised | Gradient, darker on the light side | Dished buttons, sliders |
| Convex | Outer, raised | Gradient, lighter on the light side | Domed buttons, knobs |
Switching between Flat and Pressed on the same element is a simple way to show a button press state.
Is neumorphism accessible? Edge, label and focus checks
Neumorphism is hard to make accessible because its shadows are low in contrast by design. The tool reports two checks under the preview so you can see the problem before you ship it.
Neumorphism edge contrast check for shadows
The edge note shows the contrast ratio of the shadow and the highlight against the base. For interactive controls, WCAG 1.4.11 Non-text Contrast asks for at least 3:1 on the visual information needed to identify a component. In the default example, the shadow measures about 1.33:1, so the tool warns you to add a border, icon or text label to buttons. If either shadow falls below roughly 1.05:1 it flags that side as barely visible.
Neumorphism label contrast check for text
The label note compares your Label text color with the base. A ratio of 4.5:1 passes WCAG AA for body text, and 3:1 is enough only for large text. The default label color #4B5563 on #E0E5EC is about 5.97:1, which passes. For deeper analysis of text pairs, use the Contrast Checker.
Neumorphism keyboard focus outline
Soft shadows rarely work as a focus indicator. The generated code adds a :focus-visible outline, 3 px wide with a 4 px offset, in dark or white depending on your base. This supports WCAG 2.4.7 Focus Visible. Test the outline with the Focus Indicator Contrast Checker.
Neumorphism CSS, Tailwind CSS and SCSS output
The code panel has three tabs, and each one produces working neumorphism CSS for the settings you see in the preview.
- CSS: a
.neumorphicclass with width, height, background, border-radius, box-shadow and color, plus a parent surface rule and the focus outline. - Tailwind CSS: a small HTML snippet with arbitrary-value utility classes, so you can paste it into a Tailwind project. Copy Tailwind copies only the class list.
- SCSS: variables for the base, highlight, shadow, distance, blur and radius, then the class using those variables.
The parent element must use the same base color as the shape. If the page background differs, the effect breaks. If you manage colors through tokens, move the three derived colors into CSS variables for a theme.
Neumorphism design mistakes to avoid
Most failed neumorphic designs share a few causes. These fixes apply directly to the settings in the tool.
- Using a white or near-black base: the highlight or shadow disappears. Start with a mid-light gray or a muted color such as the default.
- Setting Intensity too low: the shape vanishes on dim screens. Raise it a few points and re-check the edge note.
- Making everything soft: when every element is extruded, users cannot tell what is clickable. Reserve the effect for a few key controls.
- Relying on shadow alone: add an icon, a label or a visible border to buttons.
- Mismatching the background: keep the page or container color equal to the Base surface color.
- Using huge Blur with small Distance: shadows blur into a faint haze. Keep Blur at roughly twice the Distance, as in the default 20 px and 40 px.
Where soft UI works well
Soft UI looks best when the whole interface shares one calm surface color and a small number of elements rise or sink from it.
It suits dashboards, music or smart-home controls, calculators, onboarding cards and portfolio hero elements. For frosted overlays, try the Glassmorphism Generator, or build general drop shadows with the CSS Box Shadow Generator.
Next, convert your base color with the HEX to RGB Converter if your stylesheet uses rgb() values, or add a subtle CSS gradient to the page behind your soft UI cards.