Frequently Asked Questions
What do the box-shadow values mean?↓
A box-shadow takes the form X-offset, Y-offset, blur-radius, spread-radius, and color. The X and Y offsets move the shadow horizontally and vertically, blur softens its edges, spread grows or shrinks the shadow, and the color (with alpha) controls its tint and transparency. Adding the inset keyword draws the shadow inside the element instead of outside.
How do I add multiple shadows to one element?↓
CSS lets you list several shadows in one box-shadow property, separated by commas. This tool lets you add as many layers as you like — the first listed shadow sits on top — which is how realistic, layered elevation effects like Material Design shadows are built.
What is the Tailwind output for?↓
Tailwind CSS supports arbitrary values using square-bracket syntax. The generator converts your shadow into a class like shadow-[0_10px_15px_-3px_rgba(0,0,0,0.25)], with spaces replaced by underscores and multiple layers separated by commas, so you can drop it straight into your markup without writing custom CSS.
What is a Neumorphism shadow?↓
Neumorphism (or soft UI) uses two opposite shadows — a light one on one side and a darker one on the other — to make an element look like it is extruded from or pressed into the background. The generator includes Neumorphism presets for both light and dark surfaces so you can start from a working example.
How do I make a neumorphism shadow in CSS?↓
Give the element the same background color as its parent (for example #e0e0e0), then add two box-shadows: a darker one offset to the bottom-right and a lighter one offset to the top-left, such as box-shadow: 12px 12px 24px #bebebe, -12px -12px 24px #ffffff;. Add the inset keyword to both for a pressed look. Click Load light neumorphism on this page to start from that exact setup.
Is neumorphism accessible?↓
Not by default. Soft UI relies on subtle, low-contrast shadows, so buttons can blend into the background and pressed or focus states are hard to see, especially for people with low vision. Keep text and icons at WCAG AA contrast, add a clear focus ring, and don't use shadow as the only sign that something is clickable.
Why doesn't my neumorphism effect look right?↓
Most often the element's background doesn't match its container. The illusion needs both to be the same color, usually a mid-tone grey or pastel rather than pure white or black, so the light shadow has room to show. Keep both shadows the same distance and blur, just in opposite directions.
Is this box shadow generator free and private?↓
Yes. The CSS Box Shadow Generator is completely free with no signup required, and it runs 100% locally in your browser. Nothing you create is uploaded to or stored on any server.
Last updated: