-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcss-shadow.html
More file actions
144 lines (133 loc) · 11.9 KB
/
css-shadow.html
File metadata and controls
144 lines (133 loc) · 11.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Free CSS Box Shadow Generator — Visual Editor</title>
<meta name="description" content="Create beautiful CSS box shadows with a visual editor. Adjust offset, blur, spread, color and opacity. Copy CSS instantly. Free online box shadow generator.">
<link rel="canonical" href="https://www.quicktools.mom/css-shadow.html">
<meta property="og:title" content="">
<meta property="og:description" content="">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.quicktools.mom/css-shadow.html">
<meta name="twitter:card" content="summary">
<link rel="stylesheet" href="style.css">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2658921743607446" crossorigin="anonymous"></script>
<script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"🎨 Preset Shadows
Ad Space — 336×280
<div class="tool-card" style="max-width:720px;">
<h2 style="font-size:1rem;margin-bottom:0.75rem;">📖 About CSS Box Shadow Generator</h2>
<p style="font-size:0.85rem;line-height:1.7;color:var(--text-muted);margin-bottom:0.75rem;">CSS Box Shadow Generator is a free, browser-based tool built for developers, content creators, and marketers. Create beautiful CSS box shadows with a visual editor. Adjust offset, blur, spread, color and opacity. Copy CSS instantly. Free online box shadow generator. This tool processes everything locally using JavaScript — no data is uploaded to any server, no account is required, and there are no usage limits. Whether you’re working on a quick project or handling sensitive data, your privacy is fully protected. Bookmark this page and use it anytime — it works on desktop, tablet, and mobile devices.</p>
<h3 style="font-size:0.9rem;margin-bottom:0.5rem;">How to Use</h3>
<ol style="font-size:0.85rem;color:var(--text-muted);line-height:1.7;padding-left:1.2rem;">
<li><strong>Enter your data</strong> — Type, paste, or upload your input in the fields above.</li>
<li><strong>Configure options</strong> — Adjust any settings or parameters to match your requirements.</li>
<li><strong>Get instant results</strong> — Output updates automatically in real-time as you type.</li>
<li><strong>Copy or download</strong> — Use the Copy button to grab results, or download if available.</li>
</ol>
</div>
Frequently Asked Questions
What is CSS box-shadow?","acceptedAnswer":{"@type":"Answer","text":"The CSS box-shadow property adds shadow effects around an element. It takes values for horizontal offset, vertical offset, blur radius, spread radius, and color. Multiple shadows can be stacked using comma separation."}},{"@type":"Question","name":"What does 'inset' mean?","acceptedAnswer":{"@type":"Answer","text":"Adding 'inset' makes the shadow appear inside the element instead of outside, creating an inner shadow or pressed effect."}}]}</script>
</head>
<body>
<div class="page-wrapper">
<header class="site-header"><a href="index.html" class="site-logo"><span class="icon">⚡</span> QuickTools</a><nav class="site-nav"><a href="index.html">All Tools</a></nav></header>
<div class="ad-zone ad-zone-top">Ad Space — 728×90</div>
<div class="tool-header">
<div class="tool-badge">🌑 Design</div>
<h1>CSS Box Shadow Generator</h1>
<p>Design beautiful CSS box shadows visually. Multiple layers, inset support, live preview.</p>
</div>
<div class="tool-card">
<div style="display:flex; gap:2rem; flex-wrap:wrap; align-items:start;">
<div style="flex:1; min-width:280px;">
<div id="layersContainer"></div>
<button class="btn btn-secondary mt-2" onclick="addLayer()" style="font-size:0.8rem;">+ Add Shadow Layer</button>
</div>
<div style="flex-shrink:0; text-align:center;">
<div style="width:300px; height:300px; display:flex; align-items:center; justify-content:center; background:var(--bg-secondary); border-radius:var(--radius); border:1px solid var(--border);">
<div id="previewBox" style="width:160px; height:160px; background:var(--bg-card-hover); border-radius:12px; transition:box-shadow 0.3s;"></div>
</div>
</div>
</div>
<div class="controls-row mt-3">
<div class="control-group"><label>Box Color</label><input type="color" id="boxColor" value="#1e1e2e" onchange="document.getElementById('previewBox').style.background=this.value" style="width:50px;height:32px;border:none;cursor:pointer;"></div>
<div class="control-group"><label>Background</label><input type="color" id="bgColor" value="#12121a" onchange="document.getElementById('previewBox').parentElement.style.background=this.value" style="width:50px;height:32px;border:none;cursor:pointer;"></div>
<div class="control-group"><label>Border Radius</label><input type="range" min="0" max="50" value="12" oninput="document.getElementById('previewBox').style.borderRadius=this.value+'px'; update();"></div>
</div>
<div class="output-area mt-3">
<span class="output-label">CSS</span>
<pre id="cssOutput" style="font-size:0.85rem;"></pre>
<button class="copy-btn" onclick="copyCSS()">Copy</button>
</div>
</div>
<div class="tool-card">
<h3 style="font-size:0.95rem; margin-bottom:1rem;">🎨 Preset Shadows</h3>
<div style="display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:0.75rem;" id="presets"></div>
</div>
<div class="ad-zone">Ad Space — 336×280</div>
<div class="faq-section">
<h2>Frequently Asked Questions</h2>
<div class="faq-item"><h3>What is CSS box-shadow?</h3><p>The CSS box-shadow property adds shadow effects around an element. It takes values for horizontal offset, vertical offset, blur radius, spread radius, and color. Multiple shadows can be stacked using comma separation.</p></div>
<div class="faq-item"><h3>What does 'inset' mean?</h3><p>Adding 'inset' makes the shadow appear inside the element instead of outside, creating an inner shadow or pressed effect.</p></div>
</div>
<div class="related-tools"><h2>Related Tools</h2><div class="related-grid">
<a href="gradient-generator.html"><span class="tool-icon">🌈</span> Gradient Generator</a>
<a href="color-converter.html"><span class="tool-icon">🎨</span> Color Converter</a>
<a href="aspect-ratio.html"><span class="tool-icon">📐</span> Aspect Ratio</a>
<a href="favicon-generator.html"><span class="tool-icon">🖼️</span> Favicon Generator</a>
</div></div>
<div class="ad-zone ad-zone-bottom">Ad Space — 728×90</div>
<footer class="site-footer"><p>© 2026 QuickTools.</p><div class="footer-links"><a href="index.html">All Tools</a><a href="#">Privacy</a></div></footer>
</div>
<script>
let layers=[{x:0,y:8,blur:24,spread:-4,color:'#000000',opacity:30,inset:false}];
const presetShadows=[
{name:'Soft',layers:[{x:0,y:4,blur:24,spread:-2,color:'#000000',opacity:20,inset:false}]},
{name:'Medium',layers:[{x:0,y:10,blur:30,spread:-5,color:'#000000',opacity:30,inset:false}]},
{name:'Hard',layers:[{x:0,y:20,blur:40,spread:-8,color:'#000000',opacity:40,inset:false}]},
{name:'Elevation',layers:[{x:0,y:1,blur:3,spread:0,color:'#000000',opacity:12,inset:false},{x:0,y:4,blur:8,spread:0,color:'#000000',opacity:8,inset:false}]},
{name:'Glow',layers:[{x:0,y:0,blur:40,spread:8,color:'#6366f1',opacity:30,inset:false}]},
{name:'Neon',layers:[{x:0,y:0,blur:20,spread:2,color:'#6366f1',opacity:50,inset:false},{x:0,y:0,blur:60,spread:8,color:'#6366f1',opacity:20,inset:false}]},
{name:'Inset',layers:[{x:0,y:2,blur:8,spread:0,color:'#000000',opacity:40,inset:true}]},
{name:'Sharp',layers:[{x:8,y:8,blur:0,spread:0,color:'#000000',opacity:25,inset:false}]},
];
function hexToRGBA(hex,opacity){const r=parseInt(hex.slice(1,3),16),g=parseInt(hex.slice(3,5),16),b=parseInt(hex.slice(5,7),16);return`rgba(${r},${g},${b},${opacity/100})`;}
function renderLayers(){
document.getElementById('layersContainer').innerHTML=layers.map((l,i)=>`
<div style="padding:0.75rem;background:rgba(0,0,0,0.2);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:0.5rem;">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.5rem;">
<span style="font-size:0.8rem;font-weight:500;">Layer ${i+1}</span>
${layers.length>1?`<button onclick="layers.splice(${i},1);renderLayers();update()" style="background:none;border:none;color:var(--danger);cursor:pointer;font-size:0.9rem;">×</button>`:''}
</div>
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.5rem;font-size:0.75rem;">
<div><label>X: ${l.x}</label><input type="range" min="-50" max="50" value="${l.x}" oninput="layers[${i}].x=+this.value;this.previousElementSibling.textContent='X: '+this.value;update()"></div>
<div><label>Y: ${l.y}</label><input type="range" min="-50" max="50" value="${l.y}" oninput="layers[${i}].y=+this.value;this.previousElementSibling.textContent='Y: '+this.value;update()"></div>
<div><label>Blur: ${l.blur}</label><input type="range" min="0" max="100" value="${l.blur}" oninput="layers[${i}].blur=+this.value;this.previousElementSibling.textContent='Blur: '+this.value;update()"></div>
<div><label>Spread: ${l.spread}</label><input type="range" min="-50" max="50" value="${l.spread}" oninput="layers[${i}].spread=+this.value;this.previousElementSibling.textContent='Spread: '+this.value;update()"></div>
<div><label>Opacity: ${l.opacity}%</label><input type="range" min="0" max="100" value="${l.opacity}" oninput="layers[${i}].opacity=+this.value;this.previousElementSibling.textContent='Opacity: '+this.value+'%';update()"></div>
<div style="display:flex;gap:0.5rem;align-items:end;"><input type="color" value="${l.color}" onchange="layers[${i}].color=this.value;update()" style="width:32px;height:28px;border:none;cursor:pointer;"><label class="toggle-wrapper" style="font-size:0.7rem;"><input type="checkbox" ${l.inset?'checked':''} onchange="layers[${i}].inset=this.checked;update()">Inset</label></div>
</div>
</div>`).join('');
}
function addLayer(){layers.push({x:0,y:4,blur:16,spread:0,color:'#000000',opacity:20,inset:false});renderLayers();update();}
function getShadowCSS(){
return layers.map(l=>`${l.inset?'inset ':''}${l.x}px ${l.y}px ${l.blur}px ${l.spread}px ${hexToRGBA(l.color,l.opacity)}`).join(',\n ');
}
function update(){
const css=getShadowCSS();
document.getElementById('previewBox').style.boxShadow=css;
document.getElementById('cssOutput').textContent=`box-shadow: ${css};`;
}
function copyCSS(){navigator.clipboard.writeText(document.getElementById('cssOutput').textContent).then(()=>{const b=document.querySelector('.copy-btn');b.textContent='Copied!';b.classList.add('copied');setTimeout(()=>{b.textContent='Copy';b.classList.remove('copied')},2000)});}
document.getElementById('presets').innerHTML=presetShadows.map((p,i)=>{
const css=p.layers.map(l=>`${l.inset?'inset ':''}${l.x}px ${l.y}px ${l.blur}px ${l.spread}px ${hexToRGBA(l.color,l.opacity)}`).join(', ');
return`<div style="text-align:center;cursor:pointer;" onclick="layers=presetShadows[${i}].layers.map(l=>({...l}));renderLayers();update();">
<div style="width:60px;height:60px;margin:0 auto 0.5rem;background:var(--bg-card-hover);border-radius:8px;box-shadow:${css};"></div>
<span style="font-size:0.75rem;color:var(--text-secondary);">${p.name}</span></div>`;
}).join('');
renderLayers();update();
</script>
<script src="ads.js"></script>
</body>
</html>