🎨 CSS Box Shadow Generator — Visual Shadow Designer

Design CSS box shadows visually. Adjust offset, blur, spread, and color with live preview. Free, no signup.

#000000 Opacity: 25%

How to Use This Tool

  1. Adjust sliders for X-offset, Y-offset, Blur, and Spread — Pick shadow color and opacity — Toggle inset for inner shadows — Copy the generated CSS and paste into your stylesheet

Frequently Asked Questions

What do the box-shadow values mean?

box-shadow: offset-x offset-y blur spread color. Offset moves the shadow horizontally/vertically. Blur controls softness. Spread expands or contracts the shadow.

Can I create multiple shadows?

This tool generates single shadows. For layered shadows, combine multiple box-shadow values separated by commas in your CSS.

What about inset shadows?

Add the 'inset' keyword before the values. The visual preview shows both normal and inset shadows.

Related Tools

(function() { function hexToRgba(hex, alpha) { hex = hex.replace('#', ''); var r = parseInt(hex.substring(0, 2), 16); var g = parseInt(hex.substring(2, 4), 16); var b = parseInt(hex.substring(4, 6), 16); return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + alpha + ')'; } function update() { var x = document.getElementById('bshX').value; var y = document.getElementById('bshY').value; var blur = document.getElementById('bshBlur').value; var spread = document.getElementById('bshSpread').value; var color = document.getElementById('bshColor').value; var opacity = document.getElementById('bshOpacity').value / 100; var inset = document.getElementById('bshInset').checked ? 'inset ' : ''; var rgba = hexToRgba(color, opacity); document.getElementById('bshXVal').textContent = x + 'px'; document.getElementById('bshYVal').textContent = y + 'px'; document.getElementById('bshBlurVal').textContent = blur + 'px'; document.getElementById('bshSpreadVal').textContent = spread + 'px'; document.getElementById('bshColorHex').textContent = color; document.getElementById('bshOpacityVal').textContent = Math.round(opacity * 100) + '%'; var css = inset + x + 'px ' + y + 'px ' + blur + 'px ' + spread + 'px ' + rgba; document.getElementById('bshPreviewBox').style.boxShadow = css; document.getElementById('bshOutput').textContent = 'box-shadow: ' + css + ';'; } ['bshX', 'bshY', 'bshBlur', 'bshSpread', 'bshColor', 'bshOpacity', 'bshInset'].forEach(function(id) { var el = document.getElementById(id); el.addEventListener('input', update); el.addEventListener('change', update); }); document.getElementById('bshCopyBtn').addEventListener('click', function() { var text = document.getElementById('bshOutput').textContent; navigator.clipboard.writeText(text).then(function() { var btn = document.getElementById('bshCopyBtn'); btn.textContent = '✅ Copied!'; setTimeout(function() { btn.textContent = '📋 Copy CSS'; }, 1500); }); }); document.getElementById('bshOutput').addEventListener('click', function() { var text = this.textContent; navigator.clipboard.writeText(text).then(function() { var out = document.getElementById('bshOutput'); out.style.background = 'rgba(139, 92, 246, 0.15)'; setTimeout(function() { out.style.background = ''; }, 400); }); }); update(); })();

Powered by ToolStand