Web, UI, and CSS
Why does my card shadow look blurry?
Tools to use
You add a shadow to lift a card slightly, but get a gray haze instead. Increasing blur may soften it while weakening the boundary. Separate offset, softness, spread and opacity rather than treating shadow size as one knob. Change one value at a time in Box Shadow Generator to connect CSS numbers with their visible effect.
Start without blur to read the offset
box-shadow: 4px 8px 0px 0px rgb(15 23 42 / 0.18);Use #0F172A, x=4, y=8, blur=0, spread=0, alpha=0.18 and inset off. The shape shifts four pixels right and eight down. Starting sharply makes direction easier to inspect. Negative x moves left; negative y moves up.
A shadow does not reserve layout spacing. Use gap or margins for separation from neighboring cards. A broader shadow can overlap visually without moving the boxes; distinguish actual geometry from the painted shadow area.
Blur and spread are different controls
box-shadow: 0px 8px 24px 0px rgb(15 23 42 / 0.18);Reset x to zero and raise only blur to 24 to soften the edge. Positive spread expands the underlying shape; negative spread contracts it. Treating blur and spread as interchangeable ways to make a shadow bigger can produce an unintended heavy rim.
Negative blur is invalid here, while offsets and spread can be negative. Do not simply remove a minus sign to silence an error; check which control it belongs to. For an inner shadow, inspect the separate inset option rather than forcing offsets.
Check opacity against the real background
After fixing shape, compare alpha 0.10, 0.18 and 0.30. Zero is transparent and one opaque. The same value looks different on light and dark backgrounds. Raising it globally to rescue a dark-theme shadow can make the light version too heavy.
If the color itself includes alpha, also inspect the screen's separate alpha setting, which is used in output. A retained setting can explain why editing the color alone does not change opacity as expected. Read the final rgb(... / 0.18) value.
Consider boundaries beyond shadows in dark themes
A near-black shadow on a near-black surface may barely show. Borders, surface contrast or spacing can be clearer. Do not make selection or clickability depend on shadow alone; retain other cues and distinguish selected state from keyboard focus.
A parent's overflow clipping can cut off a shadow. Before enlarging it, inspect the destination's clipping area. A shadow visible in the preview but absent in the real page may reflect layout constraints rather than a failed copy.
Return from one swatch to the actual list
A subtle shadow on one card can look heavy across ten. Check actual count, spacing and content, including narrow screens and scrolling. Prioritize clear reading and interaction over making the shadow conspicuous.
The current basic screen adjusts one shadow. CSS can layer shadows with commas, but this screen does not offer a dedicated layer-add control. Start with one layer; if the destination needs more, define and verify each layer's role rather than assuming more is better.