CSS Box Shadow Stack
{{ summaryPrimary }}
{{ summaryLine }}
{{ badge.label }}
Choose a starter stack for cards, modals, inset fields, glows, and hard offset treatments.
Use a class, element, or state selector such as .shadow-card or .button:hover.
Shadow layers:
Open a layer to tune offset, blur, spread, color, opacity, and inset mode.
Horizontal offset in px.
px
Vertical offset in px.
px
{{ formatCssNumber(layer.blur) }}px
0 creates a sharp edge; use higher values for softer elevation.
{{ formatCssNumber(layer.spread) }}px
Negative spread helps large soft shadows stay tight near the element.
Pick the base shadow color.
{{ Math.round(clampNumber(layer.opacity, 0, 1) * 100) }}%
Layer alpha from transparent to fully opaque.
Inset paints inside the element instead of outside its border box.
Preview the same shadow on a card, button, modal, input, or chip.
Try the shadow on light, cool, dark, or transparent-grid backgrounds.
Class rule is the default; declaration and custom property are useful for design tokens.
Width and height of the preview object.
x px
{{ previewRadius }}px
Only affects the live preview shape.
Adds a short generator note at the top of the CSS output.
{{ previewLabel }} 
{{ cssCode }}
Layer State Type Offset Blur / spread Color CSS fragment Copy
{{ row.layer }} {{ row.state }} {{ row.type }} {{ row.offset }} {{ row.blurSpread }} {{ row.color }} {{ row.fragment }} 

          

        

      

    

  

                

                

                    

                        

                            Tags: Devtools, Image
                        

                        

                            Export to PDF
                            Fullscreen
                        

                    

                

            

        

    


                    
        

        

        

            

            
        

        


                                                                                                                                                                                                                                                        
        

        

            
            

                Customize

                

                    

                        

                            
                            
                        


                        

                            
                            
                        


                        

                            
                            
                        

                    


                    

                        Advanced

                        

                            

                                
                                

                                    
                                    
                                

                            


                            

                                
                                

                                    
                                    
                                

                            


                            

                                
                                

                                    
                                    :
                                    
                                

                            


                            

                                
                                

                                    
                                    
                                

                            


                            

                                

                                    
                                    
                                

                            


                            

                                

                                    
                                    
                                

                            


                            

                                
                                
                            


                            

                                
                                
                            

                        

                    

                

            

            
        


        

            
            
            
        


        
        

    

    

        

  

    

    
CSS box shadows give a rectangular element depth, glow, outline-like emphasis, or an inner pressed edge without changing the element's measured box. The property is compact, but small value changes can make a component feel grounded, float too far from the surface, lose contrast on a dark background, or create a hard graphic offset.


    

      Diagram showing offset, blur, spread, and inset parts of a CSS box shadow
    


    
Most shadows combine two ideas: position and softness. Horizontal and vertical offsets move the shadow away from the element. Blur radius softens the edge. Spread radius grows or tightens the shadow shape before blur is applied. Color and alpha decide whether the result reads as subtle elevation, a visible outline, or a glow.


    
A shadow can look correct in one context and wrong in another. The same values may be quiet on a light card, too muddy on a dark modal, or clipped by a parent container. Treat the CSS value as a starting point for visual review against the actual surface, size, border radius, and spacing where the component will appear.

  






  

    
Technical Details:


    
The CSS box-shadow property accepts none or a comma-separated list of shadows. Each shadow uses two required lengths, up to two more lengths, an optional color, and optional inset. Browsers paint the first shadow in the list closest to the element, with later shadows behind it.


    
Offsets describe placement relative to the border box. Positive x moves the shadow to the right, negative x moves it left, positive y moves it down, and negative y moves it up. A blur radius of zero keeps the edge sharp; larger blur values soften and widen the visible edge. Negative blur values are invalid in CSS, which is why this generator keeps blur at zero or higher.


    

      

        
        
          

            Value part
            Meaning
            Tool range or handling
          

        
        
          

            offset-x
            Horizontal shift from the element.
            -200 px to 200 px.
          

          

            offset-y
            Vertical shift from the element.
            -200 px to 200 px.
          

          

            blur-radius
            Softness of the shadow edge.
            0 px to 240 px.
          

          

            spread-radius
            Expansion or contraction before blur.
            -120 px to 120 px.
          

          

            color and alpha
            Rendered color and transparency.
            Color picker plus opacity from 0 to 1, emitted as rgba().
          

          

            inset
            Paints the shadow inside the element instead of outside.
            Per-shadow switch.
          

        
      

    


    
Spread changes the shadow shape before the edge is softened. For an outer shadow, positive spread expands the perimeter and negative spread contracts it. For an inner shadow, the visual effect is inverted around the inside edge. A larger border radius also changes the shadow shape because the rendered shadow follows the rounded element.


    

      

        
        
          

            Rule
            Practical effect
            Review cue
          

        
        
          

            First shadow paints closest.
            Small contact shadows should usually appear before wider ambient shadows.
            Move a shadow up when it should read as the crisp edge near the element.
          

          

            Outer shadows are ink overflow.
            They do not increase layout size or reserve spacing.
            Add margin or container padding when a wide shadow touches nearby content.
          

          

            Inset shadows sit inside the box.
            They are useful for recessed fields, pressed states, and inner borders.
            Check text and icon contrast after adding a strong inset shadow.
          

          

            Zero offsets center the shadow behind the element.
            With blur or spread, this can create a halo or outline-like effect.
            Use a dark or grid preview surface when checking glows and transparent edges.
          

        
      

    


    
The generated value uses pixel lengths and explicit rgba() color. That keeps copied CSS predictable across contexts, while the preview controls let the same shadow be inspected on different shapes and surfaces before it is reused.

  






  

    
Everyday Use & Decision Guide:


    
Start with a preset that matches the component rather than building from zero. Soft card is a calm default for panels. Floating modal gives dialogs a wider ambient shadow. Material elevation keeps the stack compact for dense interfaces. Inset input, Neon glow, and Hard offset cover more specialized treatments.


    
Use the CSS selector field when you want a complete rule or a custom property handoff. If the selector includes braces or semicolons, the tool strips those characters and falls back to .shadow-card when the selector is empty. That makes the copied CSS easier to paste into a stylesheet without carrying accidental rule syntax.


    
    
      
  • Open a shadow entry to tune x offset, y offset, blur, spread, color, opacity, and inset mode.
    • 
      
  • Use the on/off switch when you want to compare the stack without deleting a shadow.
    • 
      
  • Move compact contact shadows above wide ambient shadows because the first active shadow paints closest to the element.
    • 
      
  • Use duplicate when a second shadow should begin from the same color and offset family.
    • 
      
  • Change Preview surface to dark or grid when a glow or transparent edge needs contrast review.
    • 
      
  • Choose Declaration only for quick inline use, Selector rule for a ready CSS block, or CSS custom property for token-style reuse.
    • 
    


    
The live preview is useful for judging direction, softness, and surface contrast. It does not prove the shadow will fit every production container. Parent overflow, tight spacing, and nearby text can still hide or crowd a wide shadow because CSS shadows do not reserve layout space.


    
When the summary reports box-shadow: none, all shadows are disabled. Re-enable at least one shadow or reset a preset before copying CSS unless a no-shadow declaration is the intended result.

  






  

    
Step-by-Step Guide:


    
    
      
  1. Choose a Shadow preset. The summary updates with the active count, outer/inset mix, and depth profile.
    2. 
      
  2. Enter a CSS selector if you need a full rule or custom-property output. Leave it blank only when .shadow-card is acceptable.
    3. 
      
  3. Open the first shadow entry and adjust x offset, y offset, blur radius, spread radius, color, and opacity. Watch the Shadow Preview while changing values.
    4. 
      
  4. Add, duplicate, reorder, or disable shadows until the visual stack reads correctly. Keep the first active shadow as the closest visible edge.
    5. 
      
  5. Open Advanced to switch preview shape, surface, output mode, preview size, and preview radius. These preview settings do not change the generated shadow value except for the selected CSS output mode.
    6. 
      
  6. Open CSS Code and copy the generated rule, declaration, or custom-property block.
    7. 
      
  7. Open Layer Ledger when you need a per-shadow audit with state, type, offset, blur, spread, color, and CSS fragment.
    8. 
      
  8. Open JSON when another workflow needs the selected preset, selector, summary, CSS, shadow entries, and preview settings as structured data.
    9. 
    

  






  

    
Interpreting Results:


    
The summary is the quickest health check. It reports the number of active shadows, the outer/inset count, and a depth profile such as soft elevation, deep elevation, glow stack, hard edge, inset treatment, or no shadow. Treat that profile as a visual cue, not a design-system approval.


    

      

        
        
          

            Result tab
            What it gives you
            What to double-check
          

        
        
          

            Shadow Preview
            Rendered shadow on the selected shape and surface.
            Clipping, crowding, and contrast on the final page container.
          

          

            CSS Code
            Selector rule, declaration, or custom-property block.
            Selector naming and whether box-shadow: none; is intentional.
          

          

            Layer Ledger
            Per-shadow state, type, numeric values, color, and CSS fragment.
            Ordering, disabled entries, and opacity before handing values to another designer or developer.
          

          

            JSON
            Structured preset, selector, CSS, shadow entries, and preview settings.
            Whether another workflow expects pixel units and rgba() colors.
          

        
      

    


    
A strong preview does not mean the final component is finished. Test hover states, focus rings, dark surfaces, and small screens separately when the shadow is part of an interactive control.

  






  

    
Worked Examples:


    
The default soft card preset creates two active outer shadows. The first is 0 2px 5px -2px rgba(15, 23, 42, 0.10), and the second is 0 18px 44px -24px rgba(15, 23, 42, 0.18). The summary reads as a two-shadow soft elevation, which is a reasonable starting point for cards and light panels.


    
For a modal, the floating modal preset combines a grounded mid shadow, a wide ambient shadow, and a small edge shadow. If the preview feels too heavy, reduce the opacity of the widest shadow first rather than removing the small edge shadow that helps the dialog stay attached to the surface.


    
The neon glow preset uses zero offsets, bright color, and large blur values. On a light surface it can look washed out, so switch the preview surface to dark before judging the glow. If the glow touches nearby content, lower the spread or blur and then check spacing in the final layout.


    
If every shadow entry is switched off, the CSS output becomes box-shadow: none;. That is useful for comparing a no-shadow state, but it is also a common accidental result after toggling entries during review.

  






  

    
FAQ:


    

      Why does the first shadow matter so much?
      
CSS paints the first shadow closest to the element. Put crisp contact shadows before wider ambient shadows so the near edge stays visible.

    


    

      Can one value work for every component?
      
Usually no. A shadow that suits a card can be too broad for a button or too faint on a dark surface. Use the preview shape and surface controls, then test the copied CSS where it will be used.

    


    

      Why did my CSS output show no shadow?
      
All shadow entries are disabled when the summary says box-shadow: none. Turn one entry back on, add a new shadow, or reset the selected preset.

    


    

      What is the difference between blur and spread?
      
Spread changes the shadow size before softening. Blur controls how soft the edge becomes. A hard offset usually has low blur, while a soft elevation usually combines blur with negative spread.

    


    

      Does the preview radius change the CSS shadow?
      
No. Preview radius changes only the rendered sample object. The generated shadow value keeps the offsets, blur, spread, color, opacity, inset state, and ordering from the shadow entries.

    

  






  

    
Glossary:


    

      
Box shadow

      
A CSS visual effect that paints one or more shadows around or inside an element.

      
Offset

      
The horizontal and vertical shift of a shadow from the element.

      
Blur radius

      
The value that softens the shadow edge. CSS does not allow a negative blur radius.

      
Spread radius

      
The value that expands or contracts the shadow shape before blur is applied.

      
Inset

      
A shadow mode that paints inside the element rather than outside it.

      
CSS custom property

      
A reusable CSS value name that begins with two dashes, such as --shadow-card-shadow.

    

  






  

    
References: