[{"data":1,"prerenderedAt":90},["ShallowReactive",2],{"tool-content-en-box-shadow-generator":3},{"id":4,"title":5,"body":6,"description":80,"extension":81,"locale":82,"meta":83,"navigation":84,"path":85,"seo":86,"stem":87,"toolId":88,"__hash__":89},"tools\u002Ftools\u002Fen\u002Fbox-shadow-generator.md","Box Shadow Generator",{"type":7,"value":8,"toc":72},"minimark",[9,14,23,27,30,34,41,45,69],[10,11,13],"h2",{"id":12},"layered-shadows","Layered shadows",[15,16,17,18,22],"p",{},"Compose a ",[19,20,21],"code",{},"box-shadow"," from as many layers as you need. Each layer has independent x\u002Fy offsets, blur, spread, color, opacity, an inset toggle, and an on\u002Foff switch so you can compare variants without deleting work. Reorder layers with the up and down buttons — CSS renders them in the order shown.",[10,24,26],{"id":25},"presets","Presets",[15,28,29],{},"Start from Material, Soft, Neumorphism, Sharp, Inner, or Smooth presets, then fine-tune each layer. The preview card updates instantly against a light, dark, white, or slate background so you can judge dark and light shadows equally.",[10,31,33],{"id":32},"import-existing-css","Import existing CSS",[15,35,36,37,40],{},"Paste a ",[19,38,39],{},"box-shadow: ..."," declaration (including multi-layer values) into the import box to keep editing it here. HEX, RGB, RGBA, HSL, and HSLA colors are all parsed back into editable layers.",[10,42,44],{"id":43},"export","Export",[46,47,48,59],"ul",{},[49,50,51,55,56],"li",{},[52,53,54],"strong",{},"CSS",": ",[19,57,58],{},"box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 4px 6px rgba(0,0,0,0.1);",[49,60,61,64,65,68],{},[52,62,63],{},"Tailwind",": a single arbitrary value class such as ",[19,66,67],{},"shadow-[0_4px_6px_rgba(0,0,0,0.1)]",".",[15,70,71],{},"Your layers and preview background are saved in this browser. All processing happens locally.",{"title":73,"searchDepth":74,"depth":74,"links":75},"",2,[76,77,78,79],{"id":12,"depth":74,"text":13},{"id":25,"depth":74,"text":26},{"id":32,"depth":74,"text":33},{"id":43,"depth":74,"text":44},"Design layered CSS box-shadows with a live preview, presets, and one-click CSS or Tailwind export. All local.","md","en",{},true,"\u002Ftools\u002Fen\u002Fbox-shadow-generator",{"title":5,"description":80},"tools\u002Fen\u002Fbox-shadow-generator","box-shadow-generator","_xaaFAJI7Tqjw_oRWWh4tcYEToy7M-F1qnOM9tGDN0A",1792391416518]