Generate CSS box-shadow code with interactive sliders. Adjust offset, blur, spread, color, and opacity visually with a live preview — copy CSS instantly.
Shadow Color
Pick shadow color
Box Shadow Generator is a free online tool that lets you visually design CSS box-shadow effects using intuitive sliders and controls. You can adjust horizontal and vertical offsets, blur radius, spread radius, shadow color, and opacity in real time while seeing the result on a live preview box. It also supports inset shadows for inner glow effects. The tool outputs the complete CSS box-shadow property ready to copy and paste into your stylesheet, saving time compared to manual trial and error in your code editor.
Use the Box Shadow Generator when you need to create depth, elevation, or emphasis on UI elements like cards, modals, buttons, or dropdown menus. It is particularly helpful when experimenting with different shadow intensities and colors to match your design system. Instead of guessing pixel values and opacity levels, you can visually dial in the exact shadow you want and then grab the CSS code.
Developers and designers commonly use Box Shadow Generator to add subtle elevation to card components, create floating button effects with soft shadows, design inset shadows for pressed or recessed input fields, build layered shadow effects for modern glassmorphism designs, and prototype Material Design elevation levels. It is also used to generate consistent shadow tokens for design systems where every elevation level needs precise pixel-perfect values.
Essential terms and definitions related to Box Shadow Generator.
A CSS visual effect that adds a shadow around an element's rectangular box. Defined by offset-x, offset-y, blur-radius, spread-radius, and color values. Box shadows do not affect layout — they are purely visual and are rendered outside (or inside with "inset") the element's border box.
The third value in a box-shadow declaration that controls how soft and diffused the shadow edge appears. A value of 0 creates a sharp shadow; higher values create progressively softer, more natural-looking shadows. The blur is applied using a Gaussian function, and the shadow expands by the blur radius in all directions.
The fourth value in a box-shadow declaration that expands (positive) or contracts (negative) the shadow size relative to the element. A positive spread makes the shadow larger than the element; negative spread creates a smaller shadow. Combined with zero blur and zero offset, spread can create solid borders without affecting layout.
The tool generates a single box-shadow declaration. To combine multiple shadows, you can generate each shadow separately and comma-separate them in your CSS. Multiple shadows are applied in order, with the first shadow on top.
Blur radius controls how soft and diffused the shadow edge appears — higher values create a more gradual fade. Spread radius expands or contracts the shadow size relative to the element. A positive spread makes the shadow larger, while negative spread creates an inner shadow effect.
The tool generates standard outer shadows. To create an inset shadow, you can add the "inset" keyword to the beginning of the generated CSS value. Inset shadows appear inside the element instead of outside.
Box shadows are rendered by the GPU in modern browsers and have minimal performance impact for typical use. However, large blur radius values on many elements simultaneously can cause performance issues on low-end devices. Use shadows judiciously in scroll-heavy interfaces.
Common errors developers encounter and how to resolve them.
Box shadow gets clipped: Interaction with overflow:hidden Box shadow is drawn outside the element's box model, but a parent element with overflow:hidden or overflow:auto will clip the shadow. This commonly occurs in card layouts, slider/carousel components, and elements inside modals. Solution: leave sufficient padding around the shadowed element, or apply the shadow to a wrapper element instead of the content. Alternatively, you can use filter: drop-shadow() — this function is not affected by overflow, but it does not support the spread parameter.
Shadow color looks different across browsers: Color space and alpha blending The color value of a box shadow specified with rgba() is blended onto the underlying background via alpha compositing. Different browsers' color management implementations can create slight differences. This is especially noticeable with low-opacity, large blur values. For consistent appearance, keep the shadow color at dark gray with 15-25% opacity (rgba(0,0,0,0.15)) — this produces the most reliable and premium-looking results. Use this tool's live preview to experimentally determine the ideal opacity.
Performance issue: Large blur values cause jank during animation Box shadow animations (such as shadow growing on hover) trigger a repaint on every frame and can cause performance issues with large blur values (20px+). Solution: instead of animating box-shadow directly, animate the opacity of a shadow on a ::after pseudo-element — the browser composites opacity animations on the GPU, avoiding jank. You can also add will-change: box-shadow to give the browser advance optimization opportunity.