CSS Box Shadow Generator - Create Shadows Visually Online

Design CSS box shadows with visual controls and live preview. Create layered shadows, neumorphism effects, and copy ready-to-use CSS code.

Layer 1

10%

Horizontal Offset

Vertical Offset

Blur Radius

Spread Radius

Shadow Color

Opacity

Inset

Generated CSS

box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);

Frequently Asked Questions

What is a CSS box-shadow?

CSS box-shadow is a property that adds shadow effects around an element's frame. It can create depth, elevation, and visual hierarchy in web design. The property accepts multiple parameters: horizontal offset, vertical offset, blur radius, spread radius, color, and an optional inset keyword for inner shadows.

How do I use this box shadow generator?

Adjust the sliders to set horizontal/vertical offset, blur, spread, and opacity. Pick a shadow color using the color picker. Toggle 'Inset' for inner shadows if needed. Add multiple layers for complex effects. Copy the generated CSS code to your stylesheet.

What is neumorphism?

Neumorphism (or Soft UI) is a design trend that creates a soft, extruded plastic look by combining two shadows: one light (simulating light source) and one dark (simulating shadow). It requires a background color that matches or complements the element color for the effect to work properly.

How do I create smooth, realistic shadows?

Realistic shadows use multiple layers with progressively increasing blur and offset. This tool's 'Layered' preset creates this effect automatically by stacking multiple shadow layers with eased values. You can also manually add layers and adjust their values incrementally.

What is an inset shadow?

An inset shadow appears inside the element's frame rather than outside. It creates a pressed or engraved effect, commonly used for input fields, buttons in pressed state, or container wells. Toggle the 'Inset' checkbox to enable this effect.

Is this tool secure and private?

Yes. This tool runs 100% in your browser using client-side JavaScript. No shadow configurations or design data is ever sent to any server. Your work stays completely on your device, ensuring complete privacy for all your design work.

Code Examples

// Generate box-shadow CSS from parameters
function generateBoxShadow(layers) {
  return layers.map(layer => {
    const inset = layer.inset ? 'inset ' : '';
    const { r, g, b } = hexToRgb(layer.color);
    const rgba = `rgba(${r}, ${g}, ${b}, ${layer.opacity})`;
    return `${inset}${layer.offsetX}px ${layer.offsetY}px ${layer.blur}px ${layer.spread}px ${rgba}`;
  }).join(', ');
}

function hexToRgb(hex) {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : { r: 0, g: 0, b: 0 };
}

// Usage
const shadow = generateBoxShadow([
  { offsetX: 0, offsetY: 4, blur: 6, spread: -1, color: '#000000', opacity: 0.1, inset: false },
  { offsetX: 0, offsetY: 2, blur: 4, spread: -2, color: '#000000', opacity: 0.1, inset: false }
]);
console.log(shadow);
// Output: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1)