PocketPlay
中文

Box Shadow Generator

Stack multiple box-shadow layers with live preview, Material elevation and neumorphic presets, then copy the CSS.

🔒 Runs in your browser — files never leave your deviceFree · No sign-up

Preview

Button

Shadow layers

Presets

Material elevation

Styles

CSS


    

    

      
Tailwind arbitrary value

        

      

    

  




How to use the box-shadow generator
  1. Pick a preset or start from the default layer, then drag offset, blur, spread and opacity until it looks right.
  2. Click Add layer to stack shadows — real depth usually needs two or three layers with different blurs.
  3. Change the preview shape and background to check the shadow on the colour you will actually use, then copy the CSS.
FAQ
What does spread do?
Spread grows (positive) or shrinks (negative) the shadow before it is blurred. A small negative spread with a large blur gives the soft, tight shadow used in most modern UI kits.
How do I make an inner shadow?
Tick inset on a layer. Inset shadows are drawn inside the border box, which is how pressed buttons, input wells and neumorphic dents are made.
Why use several layers instead of one?
Real light produces both a tight contact shadow and a wide ambient one. Stacking a short, dark, low-blur layer under a long, faint, high-blur layer looks far more natural than a single shadow.


  


  

    
    

          
            
            
              CSS Gradient GeneratorHOT
              Build linear, radial and conic CSS gradients visually, then copy the CSS, a Tailwind class or an SVG file.
            
          
          
            
            
              CSS Filter Generator
              Tune blur, brightness, contrast, hue-rotate, drop-shadow and more with live sliders, then copy the CSS filter rule.
            
          
          
            
            
              CSS Animation Generator
              Build @keyframes animations visually with a cubic-bezier easing editor, ready-made effects and a live preview.
            
          
          
            
            
              Border Radius Generator
              Drag eight handles to shape any corner, including organic blob shapes, and copy the border-radius CSS.
            
          
          
            
            
              Color PickerHOT
              Pick any colour with a saturation square, hue and alpha sliders, read HEX/RGB/HSL/HSV/CMYK and check WCAG contrast.
            
          
          
            
            
              Color Converter
              Paste any colour — name, hex, rgb, hsl, hwb, lab, lch, oklch or cmyk — and get every other format instantly.
            
          
          
            
            
              CSS Grid Generator
              Design a CSS Grid visually — set track sizes and gaps, drag to name areas, and copy the container CSS and HTML.
            
          
          
            
            
              Flexbox Playground
              Try every flex container and item property on a live preview, then copy the CSS and HTML.
            
          
    

    
All tools →