CalcaTools

Box Shadow Generator | Generate CSS Box-Shadow and Copy Code

Generate CSS box-shadow code visually — adjust offset, blur, spread and color with sliders, preview live, and copy the exact declaration including inset shadows. The designer's tool for depth effects.

Last updated: June 2026 · Free · No sign-up required

5px
5px
15px
0px
0.20
CSS Code







Frequently Asked Questions






What is the difference between blur and spread in box-shadow?


Blur radius determines how soft or fuzzy the edges of the shadow will be. Spread radius expands or contracts the overall shape of the shadow in all directions before the blur is applied.






What does the 'Inset' checkbox do?


The inset keyword changes the shadow from an outer shadow (which makes the element look raised) to an inner shadow (which makes the element look sunken or pressed into the background).






How do I use rgba() color in CSS?


The rgba() function stands for Red, Green, Blue, and Alpha (opacity). Alpha is represented by a decimal value between 0 (completely transparent) and 1 (fully opaque), which allows you to create realistic, semi-transparent shadows.










			
			
			
											

					
Quick reference

					
ValueControls
offset-xhorizontal shadow position
offset-yvertical shadow position
blursoftness of the edge
spreadhow far the shadow grows
insetshadow inside the element
				

				
								

					

											

							

								info
								CSS Box Shadow Generator							

							
Free color tools calculator — enter your numbers and get an instant, accurate result.

						

											

							

								info
								Private by design							

							
Everything runs locally in your browser. No uploads, no accounts, no tracking.

						

											

							

								info
								Works everywhere							

							
Fully responsive and mobile-friendly — calculate on any device, any time.

						

											

							

								info
								Educational							

							
Includes the formula and step-by-step explanation so you understand the math, not just the answer.

						

										

				

				
								

					
Interpretation guide

					
EffectRecipe
Subtle card0 1px 3px rgba(0,0,0,.12)
Floating0 10px 25px rgba(0,0,0,.15)
Inner shadowinset 0 2px 4px rgba(0,0,0,.2)
				

				
								

					

						lightbulb
						Worked example					

					
Let's say you are using the CSS Box Shadow Generator. A free visual tool to generate CSS box-shadow code. Adjust offset, blur, spread, and color with sliders, then copy the ready-to-use CSS. Enter the values that match your situation into the input fields and press calculate — using realistic numbers makes the result directly useful for you.

										
Result: The calculator instantly applies the formula box-shadow: offset-x offset-y blur spread color (prefix with inset for inner shadows) and returns the result with appropriate precision.

															
What this means: Read the result in the context of what you are measuring. The step-by-step breakdown lets you confirm the math and understand which input most affects the outcome.

									

				
								

					
Formula & methodology

					

												

							Formula:							box-shadow: offset-x offset-y blur spread color (prefix with inset for inner shadows)
						

																			
The CSS Box Shadow Generator is built on a well-established calculation method. It uses the formula box-shadow: offset-x offset-y blur spread color (prefix with inset for inner shadows) to turn your inputs into a reliable result. A free visual tool to generate CSS box-shadow code. Adjust offset, blur, spread, and color with sliders, then copy the ready-to-use CSS. The steps are shown on the page so you can follow the reasoning from input to output.
The generator builds a CSS box-shadow from sliders for offset, blur, spread and colour, with a live preview of the depth effect.
  1. Set horizontal and vertical offsets to place the shadow.
  2. Increase blur for softness and spread for size.
  3. Choose a colour and opacity (rgba).
  4. Copy the generated box-shadow declaration into your CSS.
Worked example: 0 10px 25px rgba(0,0,0,0.15) creates a soft floating-card shadow.
																			

								Authoritative source:								
									W3Schools Colors								
							

											

				

				
								

					
Frequently asked questions

										

						
What does CSS box-shadow do?

						
The CSS Box Shadow Generator is a free online tool that a free visual tool to generate css box-shadow code. adjust offset, blur, spread, and color with sliders, then copy the ready-to-use css. You enter a few values, and it returns an accurate result together with a step-by-step explanation, so it works as both a calculator and a quick reference for the underlying concept.

					

										

						
What is the order of box-shadow values?

						
box-shadow: offset-x offset-y blur spread color — horizontal offset, vertical offset, blur radius, spread radius, then color. Positive offsets move the shadow right and down; blur softens the edge; spread expands or contracts the shadow size. Prefixing with 'inset' flips it to an inner shadow. The generator outputs the correct order with sliders for each value.

					

										

						
How do I make a soft, subtle shadow?

						
Enter the required values into the input fields and press the calculate button. The tool applies the formula box-shadow: offset-x offset-y blur spread color (prefix with inset for inner shadows) and returns the result with a short explanation of each step, so you can check the working yourself.

					

										

						
Can I add multiple shadows?

						
The CSS Box Shadow Generator is free, private, and accurate: it runs entirely in your browser (no uploads, no accounts), applies the standard calculation, and explains each step so you can verify the result. A free visual tool to generate CSS box-shadow code. Adjust offset, blur, spread, and color with sliders, then copy the ready-to-use CSS. There is no limit on usage, and it works on any device.

					

										

						
What is an inset shadow?

						
An inset shadow renders INSIDE the element's border, creating a recessed or pressed-in look — the shadow appears within the box rather than casting outside it. It is written as box-shadow: inset offset-x offset-y blur spread color. Inset shadows are used for buttons that look 'pressed', input fields, and sunken panels. The generator's inset toggle produces the correct syntax.

					

										

						
What does the CSS Box Shadow Generator do?

						
A free visual tool to generate CSS box-shadow code. Adjust offset, blur, spread, and color with sliders, then copy the ready-to-use CSS. The calculator takes your inputs, applies the standard calculation, and returns a clear result so you can make an informed decision without doing the math by hand.

					

										

						
What formula does the CSS Box Shadow Generator use?

						
The CSS Box Shadow Generator applies the standard formula: box-shadow: offset-x offset-y blur spread color (prefix with inset for inner shadows). The tool walks through each step of the calculation so you can verify the numbers yourself.

					

										

						
Is the CSS Box Shadow Generator free and private?

						
Yes — the CSS Box Shadow Generator. There is no sign-up, no paywall, no trial, and no limit on how many calculations you can run. CalcaTools covers its costs with non-intrusive display advertising, so the calculator itself never asks for payment or restricts any feature.

					

										

						
How accurate is the CSS Box Shadow Generator?

						
The CSS Box Shadow Generator applies the standard formula: box-shadow: offset-x offset-y blur spread color (prefix with inset for inner shadows). It is tested against published worked examples before launch and uses native double-precision arithmetic, so results are accurate to typical precision for the values you enter — with no intermediate rounding that could distort the answer.

					

									

				
							
			
			
			
			
			
			
			
			
						

				
Explore the full color toolkit

								
Every CalcaTools color tool — pickers, converters, gradients, and shadows for designers and developers.