[{"data":1,"prerenderedAt":26},["ShallowReactive",2],{"content-box-shadow-generator-en":3},{"about":4,"steps":8,"faq":13},[5,6,7],"With box-shadow an element casts a shadow in CSS. Shadows show what sits “above” the page – cards, menus, dialogs or buttons – and give flat interfaces depth. Good shadows are usually softer and lighter than you would think.","The generator shows every change instantly on a preview box whose color, background and corner radius you can adjust. Stack up to ten shadow layers, e.g. a tight and a wide shadow for a more natural look, and turn any layer into an inner shadow (inset).","Presets like “Soft”, “Layered” or “Glow” give you a quick starting point. The settings are stored in the URL, so you can share a shadow as a link.",[9,10,11,12],"Pick a preset or start with the default shadow.","Move the sliders for offset, blur, spread and opacity and choose each layer’s color.","Add more layers if needed or turn a layer into an inner shadow with “Inset”.","Copy the CSS code into your stylesheet.",[14,17,20,23],{"q":15,"a":16},"What do blur and spread mean?","Blur sets how softly the shadow’s edge fades out. Spread grows or shrinks the shadow before blurring. A negative value keeps the shadow visible only at the bottom instead of sticking out at the sides.",{"q":18,"a":19},"Why several shadow layers?","Real light creates a darker, tight shadow right under an object and a light, wide shadow around it. Two or more stacked layers imitate that and look much more natural than a single shadow.",{"q":21,"a":22},"How is this different from filter: drop-shadow()?","box-shadow always follows the element’s rectangle (with its corner radius). drop-shadow() follows the visible shape, such as the outline of a transparent PNG or SVG, but has no spread and no inner shadow.",{"q":24,"a":25},"How do I choose a good shadow color?","Instead of pure black, a very dark shade of the background color with low opacity often looks more harmonious. Find matching shades with the [[color-palette-generator]]; for a soft background, try a gradient from the [[css-gradient-generator]].",1792518996073]