CSS Box Shadow Generator
Design beautiful box shadows visually and get the ready-to-use CSS code instantly.
How to use the Box Shadow Generator?
- Use the sliders to adjust the Horizontal (X) and Vertical (Y) offsets.
- Set the Blur Radius for the shadow softness, and the Spread for the size.
- Pick a Shadow Color and adjust its Opacity (transparency).
- Check the "Inset" box to create an inner shadow (glassmorphism effect).
- Copy the generated Vanilla CSS or Tailwind CSS class into your project.
Frequently Asked Questions (FAQ)
What is the difference between outset and inset?
Outset creates a standard drop shadow behind the element. Inset creates an inner shadow, making the element look pressed or carved into the page.
Can I use negative values for offset?
Yes. Negative X values move the shadow to the left, and negative Y values move it upwards. This is great for simulating light coming from a specific angle.
About the CSS Box Shadow Generator
The CSS Box Shadow Generator by Grab-Kit is a free online tool designed for web designers and frontend developers. Creating the perfect box shadow in CSS can be time-consuming, especially when dealing with multiple values for horizontal and vertical offsets, blur, spread, and color opacity. Our tool provides a visual interface so you can design beautiful shadows in real-time without writing a single line of code.
Using the generator is incredibly intuitive. Simply drag the sliders to adjust the X and Y offsets, blur radius, and spread. You can also pick a custom color and adjust its opacity to create soft, realistic shadows or sharp, dramatic ones. If you need an inner shadow for inputs or buttons, just toggle the "Inset" option. As you make changes, the preview updates instantly, and the corresponding CSS code is generated below, ready for you to copy and paste directly into your project.
Why use Grab-Kit?
All our tools, including the CSS Box Shadow Generator, run entirely in your browser. This means your designs are generated instantly without any server processing, ensuring maximum speed and privacy. It is completely free, requires no signup, and works flawlessly on both desktop and mobile devices, making it the perfect companion for your web development workflow.