Box Shadow Generator \u2013 Onground Media<\/title>\r\n<meta name=\"description\" content=\"Free CSS box-shadow generator with live preview, multi-layer shadows, presets and one-click CSS, Tailwind & SCSS code.\">\r\n<style>\r\n:root{\r\n --primary:#4F46E5; --navy:#0F172A; --accent:#FF6B35; --success:#10B981;\r\n --bg:#F8FAFC; --card:#FFFFFF; --text:#1E293B; --muted:#64748B; --border:#E2E8F0;\r\n --radius:16px;\r\n}\r\n*{box-sizing:border-box;margin:0;padding:0}\r\nbody{font-family:Inter,system-ui,-apple-system,\"Segoe UI\",Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased}\r\n.hero{background:linear-gradient(135deg,var(--navy) 0%,#1e1b4b 60%,var(--primary) 130%);color:#fff;padding:44px 20px 90px;text-align:center;position:relative;overflow:hidden}\r\n.hero::before,.hero::after{content:\"\";position:absolute;border-radius:50%;filter:blur(70px);opacity:.35}\r\n.hero::before{width:300px;height:300px;background:var(--primary);top:-100px;left:-60px}\r\n.hero::after{width:260px;height:260px;background:var(--accent);bottom:-140px;right:-40px;opacity:.28}\r\n.hero>*{position:relative;z-index:1}\r\n.badge{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);padding:6px 14px;border-radius:999px;margin-bottom:14px}\r\n.hero h1{font-size:clamp(28px,4.5vw,44px);font-weight:800;letter-spacing:-.02em}\r\n.hero h1 span{color:var(--accent)}\r\n.hero p{max-width:620px;margin:12px auto 0;color:#cbd5e1;font-size:16px}\r\n.wrap{max-width:1240px;margin:-60px auto 60px;padding:0 20px;display:grid;grid-template-columns:400px 1fr;gap:24px;position:relative;z-index:2}\r\n@media(max-width:980px){.wrap{grid-template-columns:1fr}}\r\n.panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px;box-shadow:0 10px 30px -12px rgba(15,23,42,.15)}\r\n.panel h2{font-size:13px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:700;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;gap:8px}\r\n.stack{display:flex;flex-direction:column;gap:20px}\r\n\/* layers *\/\r\n.layers{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}\r\n.layer-chip{display:flex;align-items:center;gap:6px;border:1.5px solid var(--border);background:#fff;padding:6px 8px 6px 12px;border-radius:999px;font-size:13px;font-weight:600;cursor:pointer;transition:.15s;color:var(--text)}\r\n.layer-chip:hover{border-color:var(--primary)}\r\n.layer-chip.active{background:var(--primary);border-color:var(--primary);color:#fff}\r\n.layer-chip .x{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:12px;background:rgba(0,0,0,.08)}\r\n.layer-chip.active .x{background:rgba(255,255,255,.25)}\r\n.layer-chip .x:hover{background:var(--accent);color:#fff}\r\n.add-layer{border:1.5px dashed var(--primary);color:var(--primary);background:transparent;padding:6px 14px;border-radius:999px;font-size:13px;font-weight:700;cursor:pointer}\r\n.add-layer:hover{background:rgba(79,70,229,.08)}\r\n.add-layer:disabled{opacity:.4;cursor:not-allowed}\r\n\/* controls *\/\r\n.ctrl{margin-bottom:14px}\r\n.ctrl label{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:600;margin-bottom:6px}\r\n.ctrl label input[type=number]{width:70px;border:1.5px solid var(--border);border-radius:8px;padding:3px 8px;font-size:13px;font-weight:600;text-align:right;color:var(--text);font-family:inherit}\r\n.ctrl label input[type=number]:focus{outline:none;border-color:var(--primary)}\r\ninput[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;background:linear-gradient(to right,var(--primary) var(--p,50%),var(--border) var(--p,50%));outline:none;cursor:pointer}\r\ninput[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--primary);box-shadow:0 2px 6px rgba(79,70,229,.4);transition:transform .15s}\r\ninput[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}\r\ninput[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--primary)}\r\n.row{display:flex;gap:12px;align-items:center}\r\n.color-box{display:flex;align-items:center;gap:10px;flex:1}\r\ninput[type=color]{-webkit-appearance:none;appearance:none;width:44px;height:44px;border:2px solid var(--border);border-radius:12px;padding:3px;background:#fff;cursor:pointer}\r\ninput[type=color]::-webkit-color-swatch-wrapper{padding:0}\r\ninput[type=color]::-webkit-color-swatch{border:none;border-radius:8px}\r\n.hex{font-family:ui-monospace,Menlo,monospace;font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase}\r\n.switch{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;cursor:pointer;user-select:none}\r\n.switch input{display:none}\r\n.switch .track{width:42px;height:24px;border-radius:99px;background:var(--border);position:relative;transition:.2s}\r\n.switch .track::after{content:\"\";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.2s}\r\n.switch input:checked+.track{background:var(--primary)}\r\n.switch input:checked+.track::after{transform:translateX(18px)}\r\n\/* light pad *\/\r\n.pad-wrap{display:flex;gap:16px;align-items:center;margin-bottom:16px}\r\n.pad{width:130px;height:130px;border-radius:14px;background:radial-gradient(circle at center,#eef2ff,#e0e7ff);border:1.5px solid var(--border);position:relative;cursor:crosshair;touch-action:none;flex-shrink:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:26px 26px;background-color:#f1f5ff}\r\n.pad .dot{position:absolute;width:20px;height:20px;border-radius:50%;background:var(--accent);border:3px solid #fff;box-shadow:0 2px 8px rgba(255,107,53,.6);transform:translate(-50%,-50%);pointer-events:none}\r\n.pad-wrap p{font-size:12px;color:var(--muted)}\r\n.pad-wrap b{color:var(--text);display:block;font-size:13px;margin-bottom:2px}\r\n\/* preview *\/\r\n.preview-top{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-bottom:16px}\r\n.seg{display:inline-flex;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:4px;gap:2px;flex-wrap:wrap}\r\n.seg button{border:none;background:transparent;padding:7px 14px;font-size:13px;font-weight:600;color:var(--muted);border-radius:9px;cursor:pointer;font-family:inherit;transition:.15s}\r\n.seg button.on{background:#fff;color:var(--primary);box-shadow:0 1px 4px rgba(15,23,42,.12)}\r\n.stage{height:380px;border-radius:14px;display:grid;place-items:center;border:1px solid var(--border);transition:background .25s;position:relative;overflow:hidden;\r\n background-image:radial-gradient(rgba(100,116,139,.18) 1px,transparent 1px);background-size:20px 20px}\r\n.target{transition:box-shadow .2s,border-radius .2s,background .2s;display:grid;place-items:center;text-align:center;font-weight:700;color:var(--text);padding:20px}\r\n.target.card{width:260px;min-height:180px;align-content:center;gap:6px}\r\n.target.card small{font-weight:500;color:var(--muted);font-size:13px}\r\n.target.btn{padding:16px 34px;font-size:16px;cursor:pointer;border:none;color:#fff}\r\n.target.circle{width:170px;height:170px;border-radius:50%!important}\r\n.target.input{width:300px;text-align:left;justify-items:start;font-weight:500;color:var(--muted);padding:16px 18px}\r\n.stage-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;margin-top:18px;padding-top:18px;border-top:1px dashed var(--border)}\r\n.stage-controls .ctrl{margin:0}\r\n.mini-colors{display:flex;gap:16px}\r\n.mini-colors .c{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:var(--muted)}\r\n\/* presets *\/\r\n.presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px}\r\n.preset{border:1.5px solid var(--border);border-radius:12px;background:var(--bg);padding:16px 8px 10px;cursor:pointer;text-align:center;font-size:12px;font-weight:600;color:var(--muted);transition:.15s;font-family:inherit}\r\n.preset:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-2px)}\r\n.preset i{display:block;width:44px;height:44px;margin:0 auto 12px;border-radius:10px;background:#fff}\r\n\/* output *\/\r\n.tabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}\r\n.tabs button{border:1.5px solid var(--border);background:#fff;padding:6px 14px;border-radius:9px;font-size:13px;font-weight:600;cursor:pointer;color:var(--muted);font-family:inherit}\r\n.tabs button.on{background:var(--navy);border-color:var(--navy);color:#fff}\r\n.code{background:var(--navy);color:#e2e8f0;border-radius:12px;padding:18px;font-family:ui-monospace,\"SF Mono\",Menlo,Consolas,monospace;font-size:13px;line-height:1.7;white-space:pre-wrap;word-break:break-all;min-height:90px;position:relative}\r\n.code .k{color:#a5b4fc}.code .v{color:#fdba74}\r\n.actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}\r\n.btn{border:none;border-radius:10px;padding:11px 20px;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit;transition:.15s;display:inline-flex;align-items:center;gap:8px}\r\n.btn.primary{background:var(--accent);color:#fff;box-shadow:0 6px 16px -6px rgba(255,107,53,.7)}\r\n.btn.primary:hover{transform:translateY(-1px);box-shadow:0 10px 20px -8px rgba(255,107,53,.8)}\r\n.btn.ghost{background:#fff;border:1.5px solid var(--border);color:var(--text)}\r\n.btn.ghost:hover{border-color:var(--primary);color:var(--primary)}\r\n.btn.indigo{background:var(--primary);color:#fff}\r\n.btn.indigo:hover{background:#4338ca}\r\n.smooth{display:flex;gap:12px;align-items:end;flex-wrap:wrap}\r\n.smooth .ctrl{flex:1;min-width:120px;margin:0}\r\n.toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,30px);background:var(--navy);color:#fff;padding:12px 22px;border-radius:12px;font-weight:600;font-size:14px;opacity:0;pointer-events:none;transition:.3s;z-index:99;display:flex;gap:8px;align-items:center}\r\n.toast.show{opacity:1;transform:translate(-50%,0)}\r\n.toast::before{content:\"\u2713\";background:var(--success);width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:12px}\r\nfooter{text-align:center;color:var(--muted);font-size:13px;padding:0 20px 40px}\r\nfooter b{color:var(--primary)}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<header class=\"hero\">\r\n <div class=\"badge\">Free CSS Tool \u00b7 Onground Media<\/div>\r\n <h1>Box Shadow <span>Generator<\/span><\/h1>\r\n <p>Cards aur buttons ke liye premium shadows banao \u2014 multi-layer, live preview aur ready-to-paste CSS, Tailwind & SCSS code ke saath.<\/p>\r\n<\/header>\r\n\r\n<main class=\"wrap\">\r\n \r\n <div class=\"stack\">\r\n <section class=\"panel\">\r\n <h2>Shadow Layers <span id=\"layerCount\" style=\"color:var(--primary)\">1 \/ 6<\/span><\/h2>\r\n <div class=\"layers\" id=\"layers\"><\/div>\r\n\r\n <div class=\"pad-wrap\">\r\n <div class=\"pad\" id=\"pad\"><div class=\"dot\" id=\"padDot\"><\/div><\/div>\r\n <p><b>Light Direction<\/b>Pad par drag karo \u2014 shadow ka X\/Y offset turant badal jayega.<\/p>\r\n <\/div>\r\n\r\n <div class=\"ctrl\"><label>Horizontal Offset (X) <input type=\"number\" id=\"xN\"><\/label><input type=\"range\" id=\"x\" min=\"-100\" max=\"100\"><\/div>\r\n <div class=\"ctrl\"><label>Vertical Offset (Y) <input type=\"number\" id=\"yN\"><\/label><input type=\"range\" id=\"y\" min=\"-100\" max=\"100\"><\/div>\r\n <div class=\"ctrl\"><label>Blur Radius <input type=\"number\" id=\"blurN\"><\/label><input type=\"range\" id=\"blur\" min=\"0\" max=\"200\"><\/div>\r\n <div class=\"ctrl\"><label>Spread Radius <input type=\"number\" id=\"spreadN\"><\/label><input type=\"range\" id=\"spread\" min=\"-100\" max=\"100\"><\/div>\r\n <div class=\"ctrl\"><label>Opacity (%) <input type=\"number\" id=\"opN\"><\/label><input type=\"range\" id=\"op\" min=\"0\" max=\"100\"><\/div>\r\n\r\n <div class=\"row\" style=\"margin-top:6px\">\r\n <div class=\"color-box\"><input type=\"color\" id=\"color\"><div><div style=\"font-size:12px;color:var(--muted);font-weight:600\">Shadow Color<\/div><div class=\"hex\" id=\"hexLabel\"><\/div><\/div><\/div>\r\n <label class=\"switch\"><input type=\"checkbox\" id=\"inset\"><span class=\"track\"><\/span>Inset<\/label>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"panel\">\r\n <h2>\u2728 Smooth Layered Shadow<\/h2>\r\n <p style=\"font-size:13px;color:var(--muted);margin-bottom:14px\">Ek click mein Josh Comeau-style soft, realistic shadow \u2014 kai layers ek saath generate hoti hain.<\/p>\r\n <div class=\"smooth\">\r\n <div class=\"ctrl\"><label>Layers <span id=\"smLayersV\">5<\/span><\/label><input type=\"range\" id=\"smLayers\" min=\"2\" max=\"6\" value=\"5\"><\/div>\r\n <div class=\"ctrl\"><label>Height <span id=\"smHeightV\">24<\/span><\/label><input type=\"range\" id=\"smHeight\" min=\"4\" max=\"80\" value=\"24\"><\/div>\r\n <\/div>\r\n <div class=\"actions\"><button class=\"btn indigo\" id=\"smoothBtn\">Generate Smooth Shadow<\/button><button class=\"btn ghost\" id=\"randomBtn\">\ud83c\udfb2 Random<\/button><\/div>\r\n <\/section>\r\n <\/div>\r\n\r\n \r\n <div class=\"stack\">\r\n <section class=\"panel\">\r\n <div class=\"preview-top\">\r\n <h2 style=\"margin:0\">Live Preview<\/h2>\r\n <div class=\"seg\" id=\"shapeSeg\">\r\n <button data-s=\"card\" class=\"on\">Card<\/button><button data-s=\"btn\">Button<\/button><button data-s=\"circle\">Circle<\/button><button data-s=\"input\">Input<\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"stage\" id=\"stage\"><div class=\"target card\" id=\"target\"><span id=\"tLabel\">Premium Card<\/span><small id=\"tSub\">Live shadow preview<\/small><\/div><\/div>\r\n <div class=\"stage-controls\">\r\n <div class=\"mini-colors\">\r\n <div class=\"c\">Background<input type=\"color\" id=\"bgColor\" value=\"#F1F5F9\"><\/div>\r\n <div class=\"c\">Element<input type=\"color\" id=\"elColor\" value=\"#FFFFFF\"><\/div>\r\n <\/div>\r\n <div class=\"ctrl\"><label>Border Radius <input type=\"number\" id=\"radN\"><\/label><input type=\"range\" id=\"rad\" min=\"0\" max=\"80\" value=\"20\"><\/div>\r\n <div class=\"ctrl\"><label>Hover Lift (px) <input type=\"number\" id=\"hoverN\" value=\"0\"><\/label><input type=\"range\" id=\"hover\" min=\"0\" max=\"20\" value=\"0\"><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"panel\">\r\n <h2>Code Output<\/h2>\r\n <div class=\"tabs\" id=\"tabs\">\r\n <button data-t=\"css\" class=\"on\">CSS<\/button><button data-t=\"tw\">Tailwind<\/button><button data-t=\"scss\">SCSS<\/button><button data-t=\"js\">React \/ JS<\/button>\r\n <\/div>\r\n <pre class=\"code\" id=\"code\"><\/pre>\r\n <div class=\"actions\">\r\n <button class=\"btn primary\" id=\"copyBtn\">\ud83d\udccb Copy Code<\/button>\r\n <button class=\"btn ghost\" id=\"resetBtn\">\u21ba Reset<\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"panel\">\r\n <h2>Presets<\/h2>\r\n <div class=\"presets\" id=\"presets\"><\/div>\r\n <\/section>\r\n <\/div>\r\n<\/main>\r\n\r\n<footer>Made with \u2665 by <b>Onground Media<\/b> \u00b7 Free tools for digital marketers<\/footer>\r\n<div class=\"toast\" id=\"toast\">Copied to clipboard!<\/div>\r\n\r\n<script>\r\n(function(){\r\n const $ = id => document.getElementById(id);\r\n const MAX = 6;\r\n const def = () => ({x:0,y:10,blur:30,spread:-5,color:'#0F172A',op:20,inset:false});\r\n let layers = [def()];\r\n let active = 0, shape = 'card', tab = 'css';\r\n\r\n const hexToRgb = h => { h=h.replace('#',''); return [0,2,4].map(i=>parseInt(h.substr(i,2),16)); };\r\n const rgba = (hex,op) => { const [r,g,b]=hexToRgb(hex); return `rgba(${r}, ${g}, ${b}, ${+(op\/100).toFixed(2)})`; };\r\n const layerCss = l => `${l.inset?'inset ':''}${l.x}px ${l.y}px ${l.blur}px ${l.spread}px ${rgba(l.color,l.op)}`;\r\n const fullCss = () => layers.map(layerCss).join(', ');\r\n const clamp=(v,a,b)=>Math.min(b,Math.max(a,v));\r\n\r\n function paintRange(el){ const p=(el.value-el.min)\/(el.max-el.min)*100; el.style.setProperty('--p',p+'%'); }\r\n\r\n \/* ---------- UI sync ---------- *\/\r\n const pairs = [['x','xN','x'],['y','yN','y'],['blur','blurN','blur'],['spread','spreadN','spread'],['op','opN','op']];\r\n function syncControls(){\r\n const l = layers[active];\r\n pairs.forEach(([r,n,k])=>{ $(r).value=l[k]; $(n).value=l[k]; paintRange($(r)); });\r\n $('color').value=l.color; $('hexLabel').textContent=l.color; $('inset').checked=l.inset;\r\n \/\/ pad dot: map -100..100 to 0..100%\r\n $('padDot').style.left=((l.x+100)\/200*100)+'%';\r\n $('padDot').style.top=((l.y+100)\/200*100)+'%';\r\n }\r\n function renderLayers(){\r\n const box=$('layers'); box.innerHTML='';\r\n layers.forEach((l,i)=>{\r\n const c=document.createElement('div'); c.className='layer-chip'+(i===active?' active':'');\r\n c.innerHTML=`Layer ${i+1}`+(layers.length>1?'<span class=\"x\" title=\"Remove\">\u00d7<\/span>':'');\r\n c.onclick=e=>{\r\n if(e.target.classList.contains('x')){ layers.splice(i,1); active=Math.min(active,layers.length-1); }\r\n else active=i;\r\n renderLayers(); syncControls(); update();\r\n };\r\n box.appendChild(c);\r\n });\r\n const add=document.createElement('button'); add.className='add-layer'; add.textContent='+ Add Layer'; add.disabled=layers.length>=MAX;\r\n add.onclick=()=>{ const n=def(); n.y=layers[active].y+4; n.blur=layers[active].blur+10; layers.push(n); active=layers.length-1; renderLayers(); syncControls(); update(); };\r\n box.appendChild(add);\r\n $('layerCount').textContent=`${layers.length} \/ ${MAX}`;\r\n }\r\n\r\n \/* ---------- Preview ---------- *\/\r\n function applyPreview(){\r\n const t=$('target'), sh=fullCss();\r\n const hv=+$('hover').value;\r\n t.className='target '+shape;\r\n t.style.borderRadius=$('rad').value+'px';\r\n t.style.background = shape==='btn' ? 'var(--primary)' : $('elColor').value;\r\n t.style.boxShadow=sh;\r\n $('stage').style.background=$('bgColor').value;\r\n \/\/ dot grid contrast\r\n t.style.transform='none';\r\n t.onmouseenter=()=>{ if(hv>0){ t.style.transform=`translateY(-${hv}px)`; } };\r\n t.onmouseleave=()=>{ t.style.transform='none'; };\r\n t.style.transition='box-shadow .2s, transform .25s, border-radius .2s, background .2s';\r\n const labels={card:['Premium Card','Live shadow preview'],btn:['Get Started',''],circle:['Hover me',''],input:['Enter your email\u2026','']};\r\n $('tLabel').textContent=labels[shape][0]; $('tSub').textContent=labels[shape][1];\r\n $('tSub').style.display=labels[shape][1]?'':'none';\r\n }\r\n\r\n \/* ---------- Code output ---------- *\/\r\n function codeText(){\r\n const arr=layers.map(layerCss), r=$('rad').value;\r\n if(tab==='css'){\r\n return '<span class=\"k\">box-shadow<\/span>: <span class=\"v\">'+(arr.length>1?'\\n '+arr.join(',\\n ')+';':arr[0]+';')+'<\/span>'\r\n +'\\n<span class=\"k\">-webkit-box-shadow<\/span>: <span class=\"v\">'+(arr.length>1?'\\n '+arr.join(',\\n ')+';':arr[0]+';')+'<\/span>';\r\n }\r\n if(tab==='tw'){\r\n const v=arr.join(',').replace(\/ \/g,'_');\r\n return 'class=\"<span class=\"v\">shadow-[' + v + ']<\/span>\"';\r\n }\r\n if(tab==='scss'){\r\n return '<span class=\"k\">$shadow<\/span>: <span class=\"v\">'+(arr.length>1?'\\n '+arr.join(',\\n '):arr[0])+'<\/span>;\\n\\n.element {\\n <span class=\"k\">box-shadow<\/span>: $shadow;\\n}';\r\n }\r\n return 'const style = {\\n <span class=\"k\">boxShadow<\/span>: <span class=\"v\">`'+arr.join(',\\n ')+'`<\/span>\\n};';\r\n }\r\n function plainCode(){ return $('code').textContent; }\r\n\r\n function update(){ applyPreview(); $('code').innerHTML=codeText(); }\r\n\r\n \/* ---------- Events ---------- *\/\r\n pairs.forEach(([r,n,k])=>{\r\n $(r).addEventListener('input',e=>{ layers[active][k]=+e.target.value; $(n).value=e.target.value; paintRange($(r)); if(k==='x'||k==='y') syncPad(); update(); });\r\n $(n).addEventListener('input',e=>{ const rg=$(r); const v=clamp(+e.target.value||0,+rg.min,+rg.max); layers[active][k]=v; rg.value=v; paintRange(rg); if(k==='x'||k==='y') syncPad(); update(); });\r\n });\r\n function syncPad(){ const l=layers[active]; $('padDot').style.left=((l.x+100)\/200*100)+'%'; $('padDot').style.top=((l.y+100)\/200*100)+'%'; }\r\n $('color').addEventListener('input',e=>{ layers[active].color=e.target.value; $('hexLabel').textContent=e.target.value; update(); });\r\n $('inset').addEventListener('change',e=>{ layers[active].inset=e.target.checked; update(); });\r\n\r\n \/\/ pad drag\r\n const pad=$('pad'); let dragging=false;\r\n function padMove(e){\r\n const b=pad.getBoundingClientRect(); const cx=(e.touches?e.touches[0].clientX:e.clientX), cy=(e.touches?e.touches[0].clientY:e.clientY);\r\n const px=clamp((cx-b.left)\/b.width,0,1), py=clamp((cy-b.top)\/b.height,0,1);\r\n let x=Math.round(px*200-100), y=Math.round(py*200-100);\r\n if(Math.abs(x)<3)x=0; if(Math.abs(y)<3)y=0;\r\n layers[active].x=x; layers[active].y=y; syncControls(); update();\r\n }\r\n pad.addEventListener('pointerdown',e=>{ dragging=true; pad.setPointerCapture(e.pointerId); padMove(e); });\r\n pad.addEventListener('pointermove',e=>{ if(dragging) padMove(e); });\r\n pad.addEventListener('pointerup',()=>dragging=false);\r\n\r\n \/\/ shape \/ stage\r\n $('shapeSeg').addEventListener('click',e=>{ const b=e.target.closest('button'); if(!b) return; shape=b.dataset.s; [...$('shapeSeg').children].forEach(x=>x.classList.toggle('on',x===b)); update(); });\r\n ['bgColor','elColor'].forEach(id=>$(id).addEventListener('input',update));\r\n $('rad').addEventListener('input',e=>{ $('radN').value=e.target.value; paintRange(e.target); update(); });\r\n $('radN').addEventListener('input',e=>{ const v=clamp(+e.target.value||0,0,80); $('rad').value=v; paintRange($('rad')); update(); });\r\n $('hover').addEventListener('input',e=>{ $('hoverN').value=e.target.value; paintRange(e.target); update(); });\r\n $('hoverN').addEventListener('input',e=>{ const v=clamp(+e.target.value||0,0,20); $('hover').value=v; paintRange($('hover')); update(); });\r\n\r\n \/\/ tabs\r\n $('tabs').addEventListener('click',e=>{ const b=e.target.closest('button'); if(!b) return; tab=b.dataset.t; [...$('tabs').children].forEach(x=>x.classList.toggle('on',x===b)); update(); });\r\n\r\n \/\/ copy\r\n function toast(msg){ const t=$('toast'); t.textContent=msg; t.classList.add('show'); clearTimeout(toast._t); toast._t=setTimeout(()=>t.classList.remove('show'),1800); }\r\n $('copyBtn').onclick=()=>{\r\n const txt=plainCode();\r\n (navigator.clipboard?navigator.clipboard.writeText(txt):Promise.reject()).catch(()=>{\r\n const ta=document.createElement('textarea'); ta.value=txt; document.body.appendChild(ta); ta.select(); document.execCommand('copy'); ta.remove();\r\n }).finally(()=>toast('Copied to clipboard!'));\r\n };\r\n\r\n \/\/ reset\r\n $('resetBtn').onclick=()=>{ layers=[def()]; active=0; $('bgColor').value='#F1F5F9'; $('elColor').value='#FFFFFF'; $('rad').value=20; $('radN').value=20; $('hover').value=0; $('hoverN').value=0; paintRange($('rad')); paintRange($('hover')); renderLayers(); syncControls(); update(); };\r\n\r\n \/* ---------- Smooth layered generator ---------- *\/\r\n $('smLayers').addEventListener('input',e=>{ $('smLayersV').textContent=e.target.value; paintRange(e.target); });\r\n $('smHeight').addEventListener('input',e=>{ $('smHeightV').textContent=e.target.value; paintRange(e.target); });\r\n function smooth(n,h,color='#0F172A'){\r\n const out=[];\r\n for(let i=1;i<=n;i++){\r\n const f=Math.pow(2,i-1)\/Math.pow(2,n-1); \/\/ 1\/16 \u2026 1\r\n out.push({x:0,y:Math.round(h*f*0.5)||1,blur:Math.round(h*f*1.5)||2,spread:0,color,op:Math.round(6+ (12*(1-f*0.4))),inset:false});\r\n }\r\n return out;\r\n }\r\n $('smoothBtn').onclick=()=>{ layers=smooth(+$('smLayers').value,+$('smHeight').value); active=0; renderLayers(); syncControls(); update(); };\r\n $('randomBtn').onclick=()=>{\r\n const r=(a,b)=>Math.round(a+Math.random()*(b-a));\r\n const cols=['#0F172A','#4F46E5','#FF6B35','#10B981','#1E293B','#7C3AED'];\r\n const n=r(1,3); layers=[];\r\n for(let i=0;i<n;i++) layers.push({x:r(-20,20),y:r(2,40),blur:r(10,80),spread:r(-15,6),color:cols[r(0,cols.length-1)],op:r(12,45),inset:false});\r\n active=0; renderLayers(); syncControls(); update();\r\n };\r\n\r\n \/* ---------- Presets ---------- *\/\r\n const P=[\r\n ['Soft',[{x:0,y:4,blur:14,spread:0,color:'#0F172A',op:10}]],\r\n ['Elevated',[{x:0,y:10,blur:30,spread:-5,color:'#0F172A',op:20}]],\r\n ['Material',[{x:0,y:2,blur:4,spread:0,color:'#000000',op:20},{x:0,y:8,blur:16,spread:0,color:'#000000',op:14}]],\r\n ['Floating',[{x:0,y:30,blur:60,spread:-12,color:'#0F172A',op:35},{x:0,y:18,blur:36,spread:-18,color:'#0F172A',op:30}]],\r\n ['Indigo Glow',[{x:0,y:8,blur:30,spread:0,color:'#4F46E5',op:45},{x:0,y:0,blur:0,spread:1,color:'#4F46E5',op:25}]],\r\n ['Orange CTA',[{x:0,y:10,blur:24,spread:-6,color:'#FF6B35',op:60}]],\r\n ['Neon',[{x:0,y:0,blur:12,spread:0,color:'#10B981',op:80},{x:0,y:0,blur:36,spread:4,color:'#10B981',op:45}]],\r\n ['Inner Soft',[{x:0,y:3,blur:10,spread:0,color:'#0F172A',op:20,inset:true}]],\r\n ['Pressed',[{x:0,y:4,blur:8,spread:0,color:'#0F172A',op:30,inset:true},{x:0,y:1,blur:0,spread:0,color:'#FFFFFF',op:70}]],\r\n ['Neumorphic',[{x:10,y:10,blur:24,spread:0,color:'#94A3B8',op:55},{x:-10,y:-10,blur:24,spread:0,color:'#FFFFFF',op:100}]],\r\n ['Hard Offset',[{x:6,y:6,blur:0,spread:0,color:'#0F172A',op:100}]],\r\n ['Retro Stack',[{x:5,y:5,blur:0,spread:0,color:'#4F46E5',op:100},{x:10,y:10,blur:0,spread:0,color:'#FF6B35',op:100}]],\r\n ];\r\n const pc=$('presets');\r\n P.forEach(([name,ls])=>{\r\n const b=document.createElement('button'); b.className='preset';\r\n b.innerHTML=`<i style=\"box-shadow:${ls.map(l=>layerCss(Object.assign({inset:false},l))).join(',')}\"><\/i>${name}`;\r\n b.onclick=()=>{\r\n layers=ls.map(l=>Object.assign({inset:false},l)); active=0;\r\n if(name==='Neumorphic'){ $('bgColor').value='#E2E8F0'; $('elColor').value='#E2E8F0'; }\r\n else if(name==='Neon'){ $('bgColor').value='#0F172A'; $('elColor').value='#0F172A'; }\r\n else if(name==='Pressed'||name==='Inner Soft'){ $('bgColor').value='#F1F5F9'; $('elColor').value='#F1F5F9'; }\r\n else { $('bgColor').value='#F1F5F9'; $('elColor').value='#FFFFFF'; }\r\n renderLayers(); syncControls(); update();\r\n };\r\n pc.appendChild(b);\r\n });\r\n\r\n \/* ---------- init ---------- *\/\r\n ['smLayers','smHeight','rad','hover'].forEach(id=>paintRange($(id)));\r\n $('radN').value=20;\r\n renderLayers(); syncControls(); update();\r\n})();\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Box Shadow Generator \u2013 Onground Media Free CSS Tool \u00b7 Onground Media Box Shadow Generator Cards aur buttons ke liye […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-480","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ongroundmedia.com\/index.php?rest_route=\/wp\/v2\/pages\/480","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ongroundmedia.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ongroundmedia.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ongroundmedia.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ongroundmedia.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=480"}],"version-history":[{"count":3,"href":"https:\/\/ongroundmedia.com\/index.php?rest_route=\/wp\/v2\/pages\/480\/revisions"}],"predecessor-version":[{"id":483,"href":"https:\/\/ongroundmedia.com\/index.php?rest_route=\/wp\/v2\/pages\/480\/revisions\/483"}],"wp:attachment":[{"href":"https:\/\/ongroundmedia.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=480"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n \t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nBox Shadow Generator \u2013 Onground Media<\/title>\r\n<meta name=\"description\" content=\"Free CSS box-shadow generator with live preview, multi-layer shadows, presets and one-click CSS, Tailwind & SCSS code.\">\r\n<style>\r\n:root{\r\n --primary:#4F46E5; --navy:#0F172A; --accent:#FF6B35; --success:#10B981;\r\n --bg:#F8FAFC; --card:#FFFFFF; --text:#1E293B; --muted:#64748B; --border:#E2E8F0;\r\n --radius:16px;\r\n}\r\n*{box-sizing:border-box;margin:0;padding:0}\r\nbody{font-family:Inter,system-ui,-apple-system,\"Segoe UI\",Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased}\r\n.hero{background:linear-gradient(135deg,var(--navy) 0%,#1e1b4b 60%,var(--primary) 130%);color:#fff;padding:44px 20px 90px;text-align:center;position:relative;overflow:hidden}\r\n.hero::before,.hero::after{content:\"\";position:absolute;border-radius:50%;filter:blur(70px);opacity:.35}\r\n.hero::before{width:300px;height:300px;background:var(--primary);top:-100px;left:-60px}\r\n.hero::after{width:260px;height:260px;background:var(--accent);bottom:-140px;right:-40px;opacity:.28}\r\n.hero>*{position:relative;z-index:1}\r\n.badge{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);padding:6px 14px;border-radius:999px;margin-bottom:14px}\r\n.hero h1{font-size:clamp(28px,4.5vw,44px);font-weight:800;letter-spacing:-.02em}\r\n.hero h1 span{color:var(--accent)}\r\n.hero p{max-width:620px;margin:12px auto 0;color:#cbd5e1;font-size:16px}\r\n.wrap{max-width:1240px;margin:-60px auto 60px;padding:0 20px;display:grid;grid-template-columns:400px 1fr;gap:24px;position:relative;z-index:2}\r\n@media(max-width:980px){.wrap{grid-template-columns:1fr}}\r\n.panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px;box-shadow:0 10px 30px -12px rgba(15,23,42,.15)}\r\n.panel h2{font-size:13px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:700;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;gap:8px}\r\n.stack{display:flex;flex-direction:column;gap:20px}\r\n\/* layers *\/\r\n.layers{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}\r\n.layer-chip{display:flex;align-items:center;gap:6px;border:1.5px solid var(--border);background:#fff;padding:6px 8px 6px 12px;border-radius:999px;font-size:13px;font-weight:600;cursor:pointer;transition:.15s;color:var(--text)}\r\n.layer-chip:hover{border-color:var(--primary)}\r\n.layer-chip.active{background:var(--primary);border-color:var(--primary);color:#fff}\r\n.layer-chip .x{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:12px;background:rgba(0,0,0,.08)}\r\n.layer-chip.active .x{background:rgba(255,255,255,.25)}\r\n.layer-chip .x:hover{background:var(--accent);color:#fff}\r\n.add-layer{border:1.5px dashed var(--primary);color:var(--primary);background:transparent;padding:6px 14px;border-radius:999px;font-size:13px;font-weight:700;cursor:pointer}\r\n.add-layer:hover{background:rgba(79,70,229,.08)}\r\n.add-layer:disabled{opacity:.4;cursor:not-allowed}\r\n\/* controls *\/\r\n.ctrl{margin-bottom:14px}\r\n.ctrl label{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:600;margin-bottom:6px}\r\n.ctrl label input[type=number]{width:70px;border:1.5px solid var(--border);border-radius:8px;padding:3px 8px;font-size:13px;font-weight:600;text-align:right;color:var(--text);font-family:inherit}\r\n.ctrl label input[type=number]:focus{outline:none;border-color:var(--primary)}\r\ninput[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;background:linear-gradient(to right,var(--primary) var(--p,50%),var(--border) var(--p,50%));outline:none;cursor:pointer}\r\ninput[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--primary);box-shadow:0 2px 6px rgba(79,70,229,.4);transition:transform .15s}\r\ninput[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}\r\ninput[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--primary)}\r\n.row{display:flex;gap:12px;align-items:center}\r\n.color-box{display:flex;align-items:center;gap:10px;flex:1}\r\ninput[type=color]{-webkit-appearance:none;appearance:none;width:44px;height:44px;border:2px solid var(--border);border-radius:12px;padding:3px;background:#fff;cursor:pointer}\r\ninput[type=color]::-webkit-color-swatch-wrapper{padding:0}\r\ninput[type=color]::-webkit-color-swatch{border:none;border-radius:8px}\r\n.hex{font-family:ui-monospace,Menlo,monospace;font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase}\r\n.switch{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;cursor:pointer;user-select:none}\r\n.switch input{display:none}\r\n.switch .track{width:42px;height:24px;border-radius:99px;background:var(--border);position:relative;transition:.2s}\r\n.switch .track::after{content:\"\";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.2s}\r\n.switch input:checked+.track{background:var(--primary)}\r\n.switch input:checked+.track::after{transform:translateX(18px)}\r\n\/* light pad *\/\r\n.pad-wrap{display:flex;gap:16px;align-items:center;margin-bottom:16px}\r\n.pad{width:130px;height:130px;border-radius:14px;background:radial-gradient(circle at center,#eef2ff,#e0e7ff);border:1.5px solid var(--border);position:relative;cursor:crosshair;touch-action:none;flex-shrink:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:26px 26px;background-color:#f1f5ff}\r\n.pad .dot{position:absolute;width:20px;height:20px;border-radius:50%;background:var(--accent);border:3px solid #fff;box-shadow:0 2px 8px rgba(255,107,53,.6);transform:translate(-50%,-50%);pointer-events:none}\r\n.pad-wrap p{font-size:12px;color:var(--muted)}\r\n.pad-wrap b{color:var(--text);display:block;font-size:13px;margin-bottom:2px}\r\n\/* preview *\/\r\n.preview-top{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-bottom:16px}\r\n.seg{display:inline-flex;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:4px;gap:2px;flex-wrap:wrap}\r\n.seg button{border:none;background:transparent;padding:7px 14px;font-size:13px;font-weight:600;color:var(--muted);border-radius:9px;cursor:pointer;font-family:inherit;transition:.15s}\r\n.seg button.on{background:#fff;color:var(--primary);box-shadow:0 1px 4px rgba(15,23,42,.12)}\r\n.stage{height:380px;border-radius:14px;display:grid;place-items:center;border:1px solid var(--border);transition:background .25s;position:relative;overflow:hidden;\r\n background-image:radial-gradient(rgba(100,116,139,.18) 1px,transparent 1px);background-size:20px 20px}\r\n.target{transition:box-shadow .2s,border-radius .2s,background .2s;display:grid;place-items:center;text-align:center;font-weight:700;color:var(--text);padding:20px}\r\n.target.card{width:260px;min-height:180px;align-content:center;gap:6px}\r\n.target.card small{font-weight:500;color:var(--muted);font-size:13px}\r\n.target.btn{padding:16px 34px;font-size:16px;cursor:pointer;border:none;color:#fff}\r\n.target.circle{width:170px;height:170px;border-radius:50%!important}\r\n.target.input{width:300px;text-align:left;justify-items:start;font-weight:500;color:var(--muted);padding:16px 18px}\r\n.stage-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;margin-top:18px;padding-top:18px;border-top:1px dashed var(--border)}\r\n.stage-controls .ctrl{margin:0}\r\n.mini-colors{display:flex;gap:16px}\r\n.mini-colors .c{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:var(--muted)}\r\n\/* presets *\/\r\n.presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px}\r\n.preset{border:1.5px solid var(--border);border-radius:12px;background:var(--bg);padding:16px 8px 10px;cursor:pointer;text-align:center;font-size:12px;font-weight:600;color:var(--muted);transition:.15s;font-family:inherit}\r\n.preset:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-2px)}\r\n.preset i{display:block;width:44px;height:44px;margin:0 auto 12px;border-radius:10px;background:#fff}\r\n\/* output *\/\r\n.tabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}\r\n.tabs button{border:1.5px solid var(--border);background:#fff;padding:6px 14px;border-radius:9px;font-size:13px;font-weight:600;cursor:pointer;color:var(--muted);font-family:inherit}\r\n.tabs button.on{background:var(--navy);border-color:var(--navy);color:#fff}\r\n.code{background:var(--navy);color:#e2e8f0;border-radius:12px;padding:18px;font-family:ui-monospace,\"SF Mono\",Menlo,Consolas,monospace;font-size:13px;line-height:1.7;white-space:pre-wrap;word-break:break-all;min-height:90px;position:relative}\r\n.code .k{color:#a5b4fc}.code .v{color:#fdba74}\r\n.actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}\r\n.btn{border:none;border-radius:10px;padding:11px 20px;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit;transition:.15s;display:inline-flex;align-items:center;gap:8px}\r\n.btn.primary{background:var(--accent);color:#fff;box-shadow:0 6px 16px -6px rgba(255,107,53,.7)}\r\n.btn.primary:hover{transform:translateY(-1px);box-shadow:0 10px 20px -8px rgba(255,107,53,.8)}\r\n.btn.ghost{background:#fff;border:1.5px solid var(--border);color:var(--text)}\r\n.btn.ghost:hover{border-color:var(--primary);color:var(--primary)}\r\n.btn.indigo{background:var(--primary);color:#fff}\r\n.btn.indigo:hover{background:#4338ca}\r\n.smooth{display:flex;gap:12px;align-items:end;flex-wrap:wrap}\r\n.smooth .ctrl{flex:1;min-width:120px;margin:0}\r\n.toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,30px);background:var(--navy);color:#fff;padding:12px 22px;border-radius:12px;font-weight:600;font-size:14px;opacity:0;pointer-events:none;transition:.3s;z-index:99;display:flex;gap:8px;align-items:center}\r\n.toast.show{opacity:1;transform:translate(-50%,0)}\r\n.toast::before{content:\"\u2713\";background:var(--success);width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:12px}\r\nfooter{text-align:center;color:var(--muted);font-size:13px;padding:0 20px 40px}\r\nfooter b{color:var(--primary)}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<header class=\"hero\">\r\n <div class=\"badge\">Free CSS Tool \u00b7 Onground Media<\/div>\r\n <h1>Box Shadow <span>Generator<\/span><\/h1>\r\n <p>Cards aur buttons ke liye premium shadows banao \u2014 multi-layer, live preview aur ready-to-paste CSS, Tailwind & SCSS code ke saath.<\/p>\r\n<\/header>\r\n\r\n<main class=\"wrap\">\r\n \r\n <div class=\"stack\">\r\n <section class=\"panel\">\r\n <h2>Shadow Layers <span id=\"layerCount\" style=\"color:var(--primary)\">1 \/ 6<\/span><\/h2>\r\n <div class=\"layers\" id=\"layers\"><\/div>\r\n\r\n <div class=\"pad-wrap\">\r\n <div class=\"pad\" id=\"pad\"><div class=\"dot\" id=\"padDot\"><\/div><\/div>\r\n <p><b>Light Direction<\/b>Pad par drag karo \u2014 shadow ka X\/Y offset turant badal jayega.<\/p>\r\n <\/div>\r\n\r\n <div class=\"ctrl\"><label>Horizontal Offset (X) <input type=\"number\" id=\"xN\"><\/label><input type=\"range\" id=\"x\" min=\"-100\" max=\"100\"><\/div>\r\n <div class=\"ctrl\"><label>Vertical Offset (Y) <input type=\"number\" id=\"yN\"><\/label><input type=\"range\" id=\"y\" min=\"-100\" max=\"100\"><\/div>\r\n <div class=\"ctrl\"><label>Blur Radius <input type=\"number\" id=\"blurN\"><\/label><input type=\"range\" id=\"blur\" min=\"0\" max=\"200\"><\/div>\r\n <div class=\"ctrl\"><label>Spread Radius <input type=\"number\" id=\"spreadN\"><\/label><input type=\"range\" id=\"spread\" min=\"-100\" max=\"100\"><\/div>\r\n <div class=\"ctrl\"><label>Opacity (%) <input type=\"number\" id=\"opN\"><\/label><input type=\"range\" id=\"op\" min=\"0\" max=\"100\"><\/div>\r\n\r\n <div class=\"row\" style=\"margin-top:6px\">\r\n <div class=\"color-box\"><input type=\"color\" id=\"color\"><div><div style=\"font-size:12px;color:var(--muted);font-weight:600\">Shadow Color<\/div><div class=\"hex\" id=\"hexLabel\"><\/div><\/div><\/div>\r\n <label class=\"switch\"><input type=\"checkbox\" id=\"inset\"><span class=\"track\"><\/span>Inset<\/label>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"panel\">\r\n <h2>\u2728 Smooth Layered Shadow<\/h2>\r\n <p style=\"font-size:13px;color:var(--muted);margin-bottom:14px\">Ek click mein Josh Comeau-style soft, realistic shadow \u2014 kai layers ek saath generate hoti hain.<\/p>\r\n <div class=\"smooth\">\r\n <div class=\"ctrl\"><label>Layers <span id=\"smLayersV\">5<\/span><\/label><input type=\"range\" id=\"smLayers\" min=\"2\" max=\"6\" value=\"5\"><\/div>\r\n <div class=\"ctrl\"><label>Height <span id=\"smHeightV\">24<\/span><\/label><input type=\"range\" id=\"smHeight\" min=\"4\" max=\"80\" value=\"24\"><\/div>\r\n <\/div>\r\n <div class=\"actions\"><button class=\"btn indigo\" id=\"smoothBtn\">Generate Smooth Shadow<\/button><button class=\"btn ghost\" id=\"randomBtn\">\ud83c\udfb2 Random<\/button><\/div>\r\n <\/section>\r\n <\/div>\r\n\r\n \r\n <div class=\"stack\">\r\n <section class=\"panel\">\r\n <div class=\"preview-top\">\r\n <h2 style=\"margin:0\">Live Preview<\/h2>\r\n <div class=\"seg\" id=\"shapeSeg\">\r\n <button data-s=\"card\" class=\"on\">Card<\/button><button data-s=\"btn\">Button<\/button><button data-s=\"circle\">Circle<\/button><button data-s=\"input\">Input<\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"stage\" id=\"stage\"><div class=\"target card\" id=\"target\"><span id=\"tLabel\">Premium Card<\/span><small id=\"tSub\">Live shadow preview<\/small><\/div><\/div>\r\n <div class=\"stage-controls\">\r\n <div class=\"mini-colors\">\r\n <div class=\"c\">Background<input type=\"color\" id=\"bgColor\" value=\"#F1F5F9\"><\/div>\r\n <div class=\"c\">Element<input type=\"color\" id=\"elColor\" value=\"#FFFFFF\"><\/div>\r\n <\/div>\r\n <div class=\"ctrl\"><label>Border Radius <input type=\"number\" id=\"radN\"><\/label><input type=\"range\" id=\"rad\" min=\"0\" max=\"80\" value=\"20\"><\/div>\r\n <div class=\"ctrl\"><label>Hover Lift (px) <input type=\"number\" id=\"hoverN\" value=\"0\"><\/label><input type=\"range\" id=\"hover\" min=\"0\" max=\"20\" value=\"0\"><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"panel\">\r\n <h2>Code Output<\/h2>\r\n <div class=\"tabs\" id=\"tabs\">\r\n <button data-t=\"css\" class=\"on\">CSS<\/button><button data-t=\"tw\">Tailwind<\/button><button data-t=\"scss\">SCSS<\/button><button data-t=\"js\">React \/ JS<\/button>\r\n <\/div>\r\n <pre class=\"code\" id=\"code\"><\/pre>\r\n <div class=\"actions\">\r\n <button class=\"btn primary\" id=\"copyBtn\">\ud83d\udccb Copy Code<\/button>\r\n <button class=\"btn ghost\" id=\"resetBtn\">\u21ba Reset<\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"panel\">\r\n <h2>Presets<\/h2>\r\n <div class=\"presets\" id=\"presets\"><\/div>\r\n <\/section>\r\n <\/div>\r\n<\/main>\r\n\r\n<footer>Made with \u2665 by <b>Onground Media<\/b> \u00b7 Free tools for digital marketers<\/footer>\r\n<div class=\"toast\" id=\"toast\">Copied to clipboard!<\/div>\r\n\r\n<script>\r\n(function(){\r\n const $ = id => document.getElementById(id);\r\n const MAX = 6;\r\n const def = () => ({x:0,y:10,blur:30,spread:-5,color:'#0F172A',op:20,inset:false});\r\n let layers = [def()];\r\n let active = 0, shape = 'card', tab = 'css';\r\n\r\n const hexToRgb = h => { h=h.replace('#',''); return [0,2,4].map(i=>parseInt(h.substr(i,2),16)); };\r\n const rgba = (hex,op) => { const [r,g,b]=hexToRgb(hex); return `rgba(${r}, ${g}, ${b}, ${+(op\/100).toFixed(2)})`; };\r\n const layerCss = l => `${l.inset?'inset ':''}${l.x}px ${l.y}px ${l.blur}px ${l.spread}px ${rgba(l.color,l.op)}`;\r\n const fullCss = () => layers.map(layerCss).join(', ');\r\n const clamp=(v,a,b)=>Math.min(b,Math.max(a,v));\r\n\r\n function paintRange(el){ const p=(el.value-el.min)\/(el.max-el.min)*100; el.style.setProperty('--p',p+'%'); }\r\n\r\n \/* ---------- UI sync ---------- *\/\r\n const pairs = [['x','xN','x'],['y','yN','y'],['blur','blurN','blur'],['spread','spreadN','spread'],['op','opN','op']];\r\n function syncControls(){\r\n const l = layers[active];\r\n pairs.forEach(([r,n,k])=>{ $(r).value=l[k]; $(n).value=l[k]; paintRange($(r)); });\r\n $('color').value=l.color; $('hexLabel').textContent=l.color; $('inset').checked=l.inset;\r\n \/\/ pad dot: map -100..100 to 0..100%\r\n $('padDot').style.left=((l.x+100)\/200*100)+'%';\r\n $('padDot').style.top=((l.y+100)\/200*100)+'%';\r\n }\r\n function renderLayers(){\r\n const box=$('layers'); box.innerHTML='';\r\n layers.forEach((l,i)=>{\r\n const c=document.createElement('div'); c.className='layer-chip'+(i===active?' active':'');\r\n c.innerHTML=`Layer ${i+1}`+(layers.length>1?'<span class=\"x\" title=\"Remove\">\u00d7<\/span>':'');\r\n c.onclick=e=>{\r\n if(e.target.classList.contains('x')){ layers.splice(i,1); active=Math.min(active,layers.length-1); }\r\n else active=i;\r\n renderLayers(); syncControls(); update();\r\n };\r\n box.appendChild(c);\r\n });\r\n const add=document.createElement('button'); add.className='add-layer'; add.textContent='+ Add Layer'; add.disabled=layers.length>=MAX;\r\n add.onclick=()=>{ const n=def(); n.y=layers[active].y+4; n.blur=layers[active].blur+10; layers.push(n); active=layers.length-1; renderLayers(); syncControls(); update(); };\r\n box.appendChild(add);\r\n $('layerCount').textContent=`${layers.length} \/ ${MAX}`;\r\n }\r\n\r\n \/* ---------- Preview ---------- *\/\r\n function applyPreview(){\r\n const t=$('target'), sh=fullCss();\r\n const hv=+$('hover').value;\r\n t.className='target '+shape;\r\n t.style.borderRadius=$('rad').value+'px';\r\n t.style.background = shape==='btn' ? 'var(--primary)' : $('elColor').value;\r\n t.style.boxShadow=sh;\r\n $('stage').style.background=$('bgColor').value;\r\n \/\/ dot grid contrast\r\n t.style.transform='none';\r\n t.onmouseenter=()=>{ if(hv>0){ t.style.transform=`translateY(-${hv}px)`; } };\r\n t.onmouseleave=()=>{ t.style.transform='none'; };\r\n t.style.transition='box-shadow .2s, transform .25s, border-radius .2s, background .2s';\r\n const labels={card:['Premium Card','Live shadow preview'],btn:['Get Started',''],circle:['Hover me',''],input:['Enter your email\u2026','']};\r\n $('tLabel').textContent=labels[shape][0]; $('tSub').textContent=labels[shape][1];\r\n $('tSub').style.display=labels[shape][1]?'':'none';\r\n }\r\n\r\n \/* ---------- Code output ---------- *\/\r\n function codeText(){\r\n const arr=layers.map(layerCss), r=$('rad').value;\r\n if(tab==='css'){\r\n return '<span class=\"k\">box-shadow<\/span>: <span class=\"v\">'+(arr.length>1?'\\n '+arr.join(',\\n ')+';':arr[0]+';')+'<\/span>'\r\n +'\\n<span class=\"k\">-webkit-box-shadow<\/span>: <span class=\"v\">'+(arr.length>1?'\\n '+arr.join(',\\n ')+';':arr[0]+';')+'<\/span>';\r\n }\r\n if(tab==='tw'){\r\n const v=arr.join(',').replace(\/ \/g,'_');\r\n return 'class=\"<span class=\"v\">shadow-[' + v + ']<\/span>\"';\r\n }\r\n if(tab==='scss'){\r\n return '<span class=\"k\">$shadow<\/span>: <span class=\"v\">'+(arr.length>1?'\\n '+arr.join(',\\n '):arr[0])+'<\/span>;\\n\\n.element {\\n <span class=\"k\">box-shadow<\/span>: $shadow;\\n}';\r\n }\r\n return 'const style = {\\n <span class=\"k\">boxShadow<\/span>: <span class=\"v\">`'+arr.join(',\\n ')+'`<\/span>\\n};';\r\n }\r\n function plainCode(){ return $('code').textContent; }\r\n\r\n function update(){ applyPreview(); $('code').innerHTML=codeText(); }\r\n\r\n \/* ---------- Events ---------- *\/\r\n pairs.forEach(([r,n,k])=>{\r\n $(r).addEventListener('input',e=>{ layers[active][k]=+e.target.value; $(n).value=e.target.value; paintRange($(r)); if(k==='x'||k==='y') syncPad(); update(); });\r\n $(n).addEventListener('input',e=>{ const rg=$(r); const v=clamp(+e.target.value||0,+rg.min,+rg.max); layers[active][k]=v; rg.value=v; paintRange(rg); if(k==='x'||k==='y') syncPad(); update(); });\r\n });\r\n function syncPad(){ const l=layers[active]; $('padDot').style.left=((l.x+100)\/200*100)+'%'; $('padDot').style.top=((l.y+100)\/200*100)+'%'; }\r\n $('color').addEventListener('input',e=>{ layers[active].color=e.target.value; $('hexLabel').textContent=e.target.value; update(); });\r\n $('inset').addEventListener('change',e=>{ layers[active].inset=e.target.checked; update(); });\r\n\r\n \/\/ pad drag\r\n const pad=$('pad'); let dragging=false;\r\n function padMove(e){\r\n const b=pad.getBoundingClientRect(); const cx=(e.touches?e.touches[0].clientX:e.clientX), cy=(e.touches?e.touches[0].clientY:e.clientY);\r\n const px=clamp((cx-b.left)\/b.width,0,1), py=clamp((cy-b.top)\/b.height,0,1);\r\n let x=Math.round(px*200-100), y=Math.round(py*200-100);\r\n if(Math.abs(x)<3)x=0; if(Math.abs(y)<3)y=0;\r\n layers[active].x=x; layers[active].y=y; syncControls(); update();\r\n }\r\n pad.addEventListener('pointerdown',e=>{ dragging=true; pad.setPointerCapture(e.pointerId); padMove(e); });\r\n pad.addEventListener('pointermove',e=>{ if(dragging) padMove(e); });\r\n pad.addEventListener('pointerup',()=>dragging=false);\r\n\r\n \/\/ shape \/ stage\r\n $('shapeSeg').addEventListener('click',e=>{ const b=e.target.closest('button'); if(!b) return; shape=b.dataset.s; [...$('shapeSeg').children].forEach(x=>x.classList.toggle('on',x===b)); update(); });\r\n ['bgColor','elColor'].forEach(id=>$(id).addEventListener('input',update));\r\n $('rad').addEventListener('input',e=>{ $('radN').value=e.target.value; paintRange(e.target); update(); });\r\n $('radN').addEventListener('input',e=>{ const v=clamp(+e.target.value||0,0,80); $('rad').value=v; paintRange($('rad')); update(); });\r\n $('hover').addEventListener('input',e=>{ $('hoverN').value=e.target.value; paintRange(e.target); update(); });\r\n $('hoverN').addEventListener('input',e=>{ const v=clamp(+e.target.value||0,0,20); $('hover').value=v; paintRange($('hover')); update(); });\r\n\r\n \/\/ tabs\r\n $('tabs').addEventListener('click',e=>{ const b=e.target.closest('button'); if(!b) return; tab=b.dataset.t; [...$('tabs').children].forEach(x=>x.classList.toggle('on',x===b)); update(); });\r\n\r\n \/\/ copy\r\n function toast(msg){ const t=$('toast'); t.textContent=msg; t.classList.add('show'); clearTimeout(toast._t); toast._t=setTimeout(()=>t.classList.remove('show'),1800); }\r\n $('copyBtn').onclick=()=>{\r\n const txt=plainCode();\r\n (navigator.clipboard?navigator.clipboard.writeText(txt):Promise.reject()).catch(()=>{\r\n const ta=document.createElement('textarea'); ta.value=txt; document.body.appendChild(ta); ta.select(); document.execCommand('copy'); ta.remove();\r\n }).finally(()=>toast('Copied to clipboard!'));\r\n };\r\n\r\n \/\/ reset\r\n $('resetBtn').onclick=()=>{ layers=[def()]; active=0; $('bgColor').value='#F1F5F9'; $('elColor').value='#FFFFFF'; $('rad').value=20; $('radN').value=20; $('hover').value=0; $('hoverN').value=0; paintRange($('rad')); paintRange($('hover')); renderLayers(); syncControls(); update(); };\r\n\r\n \/* ---------- Smooth layered generator ---------- *\/\r\n $('smLayers').addEventListener('input',e=>{ $('smLayersV').textContent=e.target.value; paintRange(e.target); });\r\n $('smHeight').addEventListener('input',e=>{ $('smHeightV').textContent=e.target.value; paintRange(e.target); });\r\n function smooth(n,h,color='#0F172A'){\r\n const out=[];\r\n for(let i=1;i<=n;i++){\r\n const f=Math.pow(2,i-1)\/Math.pow(2,n-1); \/\/ 1\/16 \u2026 1\r\n out.push({x:0,y:Math.round(h*f*0.5)||1,blur:Math.round(h*f*1.5)||2,spread:0,color,op:Math.round(6+ (12*(1-f*0.4))),inset:false});\r\n }\r\n return out;\r\n }\r\n $('smoothBtn').onclick=()=>{ layers=smooth(+$('smLayers').value,+$('smHeight').value); active=0; renderLayers(); syncControls(); update(); };\r\n $('randomBtn').onclick=()=>{\r\n const r=(a,b)=>Math.round(a+Math.random()*(b-a));\r\n const cols=['#0F172A','#4F46E5','#FF6B35','#10B981','#1E293B','#7C3AED'];\r\n const n=r(1,3); layers=[];\r\n for(let i=0;i<n;i++) layers.push({x:r(-20,20),y:r(2,40),blur:r(10,80),spread:r(-15,6),color:cols[r(0,cols.length-1)],op:r(12,45),inset:false});\r\n active=0; renderLayers(); syncControls(); update();\r\n };\r\n\r\n \/* ---------- Presets ---------- *\/\r\n const P=[\r\n ['Soft',[{x:0,y:4,blur:14,spread:0,color:'#0F172A',op:10}]],\r\n ['Elevated',[{x:0,y:10,blur:30,spread:-5,color:'#0F172A',op:20}]],\r\n ['Material',[{x:0,y:2,blur:4,spread:0,color:'#000000',op:20},{x:0,y:8,blur:16,spread:0,color:'#000000',op:14}]],\r\n ['Floating',[{x:0,y:30,blur:60,spread:-12,color:'#0F172A',op:35},{x:0,y:18,blur:36,spread:-18,color:'#0F172A',op:30}]],\r\n ['Indigo Glow',[{x:0,y:8,blur:30,spread:0,color:'#4F46E5',op:45},{x:0,y:0,blur:0,spread:1,color:'#4F46E5',op:25}]],\r\n ['Orange CTA',[{x:0,y:10,blur:24,spread:-6,color:'#FF6B35',op:60}]],\r\n ['Neon',[{x:0,y:0,blur:12,spread:0,color:'#10B981',op:80},{x:0,y:0,blur:36,spread:4,color:'#10B981',op:45}]],\r\n ['Inner Soft',[{x:0,y:3,blur:10,spread:0,color:'#0F172A',op:20,inset:true}]],\r\n ['Pressed',[{x:0,y:4,blur:8,spread:0,color:'#0F172A',op:30,inset:true},{x:0,y:1,blur:0,spread:0,color:'#FFFFFF',op:70}]],\r\n ['Neumorphic',[{x:10,y:10,blur:24,spread:0,color:'#94A3B8',op:55},{x:-10,y:-10,blur:24,spread:0,color:'#FFFFFF',op:100}]],\r\n ['Hard Offset',[{x:6,y:6,blur:0,spread:0,color:'#0F172A',op:100}]],\r\n ['Retro Stack',[{x:5,y:5,blur:0,spread:0,color:'#4F46E5',op:100},{x:10,y:10,blur:0,spread:0,color:'#FF6B35',op:100}]],\r\n ];\r\n const pc=$('presets');\r\n P.forEach(([name,ls])=>{\r\n const b=document.createElement('button'); b.className='preset';\r\n b.innerHTML=`<i style=\"box-shadow:${ls.map(l=>layerCss(Object.assign({inset:false},l))).join(',')}\"><\/i>${name}`;\r\n b.onclick=()=>{\r\n layers=ls.map(l=>Object.assign({inset:false},l)); active=0;\r\n if(name==='Neumorphic'){ $('bgColor').value='#E2E8F0'; $('elColor').value='#E2E8F0'; }\r\n else if(name==='Neon'){ $('bgColor').value='#0F172A'; $('elColor').value='#0F172A'; }\r\n else if(name==='Pressed'||name==='Inner Soft'){ $('bgColor').value='#F1F5F9'; $('elColor').value='#F1F5F9'; }\r\n else { $('bgColor').value='#F1F5F9'; $('elColor').value='#FFFFFF'; }\r\n renderLayers(); syncControls(); update();\r\n };\r\n pc.appendChild(b);\r\n });\r\n\r\n \/* ---------- init ---------- *\/\r\n ['smLayers','smHeight','rad','hover'].forEach(id=>paintRange($(id)));\r\n $('radN').value=20;\r\n renderLayers(); syncControls(); update();\r\n})();\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Box Shadow Generator \u2013 Onground Media Free CSS Tool \u00b7 Onground Media Box Shadow Generator Cards aur buttons ke liye […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-480","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ongroundmedia.com\/index.php?rest_route=\/wp\/v2\/pages\/480","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ongroundmedia.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ongroundmedia.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ongroundmedia.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ongroundmedia.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=480"}],"version-history":[{"count":3,"href":"https:\/\/ongroundmedia.com\/index.php?rest_route=\/wp\/v2\/pages\/480\/revisions"}],"predecessor-version":[{"id":483,"href":"https:\/\/ongroundmedia.com\/index.php?rest_route=\/wp\/v2\/pages\/480\/revisions\/483"}],"wp:attachment":[{"href":"https:\/\/ongroundmedia.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=480"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}