ColorKitFree neumorphism CSS generator
Neumorphism generator with the contrast bill attached
Free and no account needed: give it the background color the card has to sit on and both shadow colors fall out of that one value — raised, pressed, concave or convex, lit from whichever corner you choose. Two derivations sit side by side, the channel scaling that produces the familiar #e0e0e0, #ffffff and #bebebe triple, and an equal-distance version that keeps both sides moving when the surface is dark. Next to the CSS the panel prints what the edge is worth: on #e0e0e0 at 15% intensity it measures 1.40:1, and a control boundary is supposed to reach 3:1.
- 100% free
- No signup
- 4 forms
- Edge measured in :1
- Dark surfaces handled
The panel around the card is painted in the surface color on purpose: the moment those two differ, the shadows stop reading as a bulge and start reading as a rectangle.
Press Ctrl+V anywhere on the page to drop in the background color the card has to sit on — no need to click the field first.
The derived pair
Highlight
#ffffff
Surface
#e0e0e0
Shadow
#bebebe
Channel scaling has run out of headroom: the highlight is already #ffffff, so raising intensity now deepens the shadow only and tips the card to one side. Equal distance keeps both sides moving.
.neu-card {
border-radius: 24px;
background: #e0e0e0;
box-shadow:
20px 20px 60px #bebebe,
-20px -20px 60px #ffffff;
}What the edge is worth
- Strongest edge against the surface
- 1.40:1
- Label against the surface
- 3.44:1
- Surface lightness
- 88% HSL
Below the 3:1 of SC 1.4.11. Intensity 43% is where the edge first clears it, by which point the shadow reads as a hard drop shadow rather than a bulge.
The label is under 4.5:1, so body copy on this card fails SC 1.4.3. On this surface #000000 is the strongest of black and white.
How to generate a soft UI card
Three steps from a background color to a rule, with the accessibility cost printed alongside it.
Start from the background, not from the card
Paste or type the color of the container the card will live in. Soft UI has no fill of its own — the card is the same color as the page and only the two shadows separate them — so this single value decides both shadow colors and the whole result. If the page background is a gradient or an image, stop here: there is no surface color to derive from and the technique does not apply.
Shape the bulge
Offset moves the pair apart, blur softens them and intensity decides how far each one travels from the surface. The proportion in the original soft-UI examples is a blur roughly three times the offset — 20px and 60px — and going below one-to-one turns the illusion into an ordinary drop shadow. Move the highlight to whichever corner your light comes from, then choose raised, pressed for the active state, or concave and convex, which add a two-stop gradient across the face.
Read the edge before you copy
The panel on the right prints the stronger of the two edges as a contrast ratio against the surface, the label's own ratio, and the intensity at which the edge would first reach 3:1. Treat those three numbers as the price list: if the card is decorative the price is fine, and if it is a control someone has to find, the number tells you how much extra the design owes in the form of a border, an outline or a focus ring.
Technical specifications
| Rule emitted | border-radius, background and one box-shadow holding exactly two shadows; the concave and convex forms replace the flat background with a two-stop linear-gradient angled at the highlight corner |
|---|---|
| Pair derivation | Channel scaling, each channel times 1 plus or minus the intensity and clipped at #ffffff, or equal distance, interpolated the same fraction toward white and toward black |
| Intensity | 1-60%, default 15% — the value the original soft-UI examples settled on |
| Offset and blur | Offset 2-40px, default 20px; blur 0-120px, default 60px, keeping the 1:3 proportion of the classic #e0e0e0 card |
| Corner radius | 0-100px, default 24px, applied to all four corners of the preview and the rule |
| Forms | Raised, pressed with both shadows inset, concave and convex, in any of four light corners |
| Boundary reading | The stronger of the two edges as a ratio against the surface, checked against the 3:1 of WCAG 2.1 SC 1.4.11, alongside the lowest intensity that would reach it |
| State kept | None — the derivation runs in the tab and nothing is stored, so a reload returns the #e0e0e0 default rather than your last surface |
Frequently asked questions
Why does my card look like a plain rectangle instead of a bulge?
The card's background and its container's background have drifted apart. The illusion depends on the two being identical to the byte: as soon as the card is even one step lighter, the eye sees a filled shape sitting on a page rather than the page itself swelling, and the shadows read as a border. The other common cause is a blur far larger than the offset, which spreads both shadows so thin that neither one draws an edge.
Is neumorphism accessible?
Not by default, and the gap is large rather than marginal. WCAG 2.1 SC 1.4.11 asks for 3:1 between a control's boundary and what surrounds it; a card on #e0e0e0 at the conventional 15% intensity produces a shadow of #bebebe, which is 1.40:1, and the white highlight is 1.32:1. On that surface the edge does not clear 3:1 until intensity 43%, where the shadow has darkened to about #808080 and the soft look is gone. The workable compromise is to keep the effect for decorative panels and give anything clickable a real border, a visible focus outline and a label that passes on its own.
Which surface colors actually work?
Mid-light greys and desaturated tints, which is why nearly every soft-UI screenshot uses something within a few steps of #e0e0e0. The technique needs headroom in both directions: a surface at or near #ffffff leaves the highlight nowhere to go, so only the shadow side renders and the card tips visibly, and a near-black surface has the same problem in reverse. A little saturation in the surface is worth having — deriving the pair from a slightly blue grey keeps the shadows from looking like dirt.
Can I do soft UI in dark mode?
Yes, but not by swapping the two shadow colors over. Channel scaling — the method most generators use — multiplies each channel by 1 plus the intensity, and on a dark surface that arithmetic has almost nothing to multiply: #2e2e2e at 15% yields #353535, an edge of 1.11:1 that no intensity setting can push to 3:1. Switch the derivation to equal distance, which interpolates toward white and black by the same fraction; on the same surface it reaches 3:1 at 35% and stays balanced on the way there.
How do I build the pressed state?
Put both shadows inside the element with the inset keyword and leave every other value untouched. Keeping the offsets, blur and colors identical between the raised and pressed rules is what makes the two read as one object rather than two, and the Pressed button here emits exactly that. Transition the pair rather than re-rendering it, keep the blur constant across the transition, and remember that a change nobody can see at 1.4:1 is not a state change — pair it with a transform or a color shift.
Why does the effect break on a patterned page background?
Because both shadows are computed from one flat color that is assumed to continue in every direction. Over a photograph, a gradient or a repeating pattern, the shadow lands on pixels it was never derived from, and the card outlines itself as a rectangle of the wrong color. Give the card a flat parent of its own if the surrounding page has to stay busy — the parent is what the shadows need to match, not the page.
What should the blur be relative to the offset?
Between two and three times the offset for a bulge, and roughly equal to it for something that reads as raised and firm. Below the offset the pair stops being ambient light and becomes a pair of hard drop shadows pointing in opposite directions, which is a look, but it is not this one. This generator leaves spread out of the shorthand entirely: it inflates both shadows symmetrically and the effect depends on them being asymmetric.
About soft UI and its shadow pair
Neumorphism is a single trick executed precisely. An element is painted the exact color of its parent and given two shadows: a lighter one toward the light source and a darker one away from it. Nothing else distinguishes the shape, so the eye reads the pair as curvature and concludes the surface itself has swollen. Every generator differs only in how it derives those two colors, and most of them multiply each channel by one plus or minus an intensity — arithmetic that gives #e0e0e0 the recognizable #ffffff and #bebebe partners and then quietly breaks twice, once at the top where the highlight saturates and cannot get lighter, and once at the bottom where multiplying a small channel leaves it small. Interpolating both directions by the same fraction instead is what keeps a dark surface usable, so both methods are on the panel rather than one being chosen for you. When the shape wants an ordinary elevation rather than this illusion, a conventional stack of shadows does the job with a tenth of the fragility.
The honest problem with the style is contrast, and it is arithmetic rather than opinion. The only boundary a soft-UI control has is the shadow edge, and WCAG 2.1 SC 1.4.11 asks that a boundary needed to identify a control reach 3:1 against its surroundings. At the intensity that makes the effect look right the edge lands near 1.4:1, roughly half of what is required, and pushing intensity until it complies destroys the softness that was the point. Text on the surface tends to fail for a related reason: soft-UI palettes favour mid-grey labels that sit two or three steps from a mid-grey background, and #8a8a8a on #e0e0e0 is 2.62:1 against a requirement of 4.5:1 — worth running both pairs through the contrast checker before a client audit does it for you. The practical settlement most teams reach is to keep the treatment for panels and cards nobody has to click, and to build anything interactive as a button with real states — a visible border, a focus outline that is not a shadow, and a hover change larger than the eye can miss.
Two details decide whether the result looks made or generated. Radius is the first: the shadow pair follows the corner curve, and a card under about 12px of corner radius reads as a photograph with a drop shadow rather than as moulded material. The second is the face: concave and convex are not extra shadows but a two-stop gradient across the element, running from the lit corner to the shaded one for a dome and the other way round for a dish. It is worth noticing what the technique demands of the page around it: this one insists that its neighbor be a flat color it can match, while frosted glass insists on the opposite, a busy backdrop it can blur. Neither is a drop-in on a page that was not designed for it.
Where the shadow colors are computed
Every number on this page is worked out by JavaScript running in the tab you are reading it in. Nothing you type, paste or open is uploaded, logged or kept, which is also why the tools carry on working after you disconnect from the network.
The derivation is a few lines of arithmetic on three channel values, so there is no request to make and nothing worth keeping: close the tab and the surface color you typed goes with it.