Loading
Build layered CSS box shadows with offsets, blur, spread, color and inset options.
Designbox-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25);
Adjust the horizontal and vertical offset sliders.
Set the blur radius and spread radius.
Choose a shadow color using the color picker.
Toggle inset shadow if you want an inner shadow effect.
Copy the generated CSS box-shadow declaration and paste it into your stylesheet.
Create subtle elevation shadows for card components in web UIs without trial-and-error in your code editor.
Design pressed or raised button effects using inset or outer shadows to give interactive elements a tactile feel.
Combine multiple box shadows (light and dark) to create the soft extruded neumorphism design style.
Generate glow-style box shadows for focus rings on form inputs to improve accessibility and visual feedback.
Box Shadow Generator gives you a visual drag-and-drop interface to design CSS box shadows and instantly copies the ready-to-paste CSS code.
Found incorrect guidance or a result? Send the team steps and a non-sensitive example.
Select a color and copy HEX, RGB, HSL and other displayed color values.
Adjust linear or radial gradient stops and copy the generated CSS.
Adjust individual corner radii in pixels or percentages and copy the CSS.
Generate color harmonies from a base color and copy palette values.
Browse the built-in Tailwind color table and copy a color or utility value.
Preview approximate TikTok, Reels or Shorts overlays on a portrait image.