Shadow & Gradient Generator
box-shadow: 6px 10px 28px 0px rgba(46, 30, 14, 0.30);Nudge the sliders and the CSS line stays in sync. Copy it straight into your stylesheet.
How it works
仕組みBox shadows, gradients, and border radii are quicker to judge by eye than by editing numbers in a stylesheet and reloading. This generator gives you three workbenches (shadow, gradient, and radius), each with sliders and color pickers wired to a live preview card and a CSS output line that stays in sync as you drag. The radius bench includes a blob mode that writes the eight-value slash syntax for organic, asymmetric shapes. When the preview looks right, copy the one-line rule straight into your project.
Keep opacity low (15-35%), make the blur noticeably larger than the offset, and tint the shadow toward your background’s hue rather than pure black. Layering two or three subtle shadows of increasing size reads far softer than one heavy shadow.
Values before the slash set each corner’s horizontal radius and values after it set the vertical radius, in top-left, top-right, bottom-right, bottom-left order. Unequal pairs turn corners into ellipse quarters, which is how the popular “blob” shapes are made from a single div.
Large areas bridging two distant colors can expose the limited steps an 8-bit display can show. Nudge the two colors closer in lightness, add a midpoint stop, or overlay very subtle noise. Banding also varies by monitor, so check on more than one screen before blaming the CSS.