DEV Community

Cover image for A tool to Make CSS Box Shadows Effortlessly

A tool to Make CSS Box Shadows Effortlessly

Arbaoui Mehdi on June 28, 2023

We've made boxshadows.xyz aimed at easing the process of creating and managing the box-shadow property in CSS. It's designed to facilitate the crea...
Collapse
 
madsstoumann profile image
Mads Stoumann •

Looks great, and ideal for working with multiple shadows!
If you want a simple, in-context tool for shadows, Dev Tools has one built-in:

dev tools box-shadow

There's a similar tool for text-shadow, but none for filter: drop-shadow()

Collapse
 
arbaoui_mehdi profile image
Arbaoui Mehdi •

Thanks!
Yeah, Chrome DevTools BoxShadow 2D-Slider is an incredibly useful tool for smoothly controlling box shadows.

Collapse
 
philipjohnbasile profile image
Philip John Basile •

Really slick! Great job ya'll!

Collapse
 
arbaoui_mehdi profile image
Arbaoui Mehdi •

Thanks, Glad you liked it!

Collapse
 
amircahyadi profile image
Amir-cahyadi •

Love sir ❤️❤️

Collapse
 
arbaoui_mehdi profile image
Arbaoui Mehdi •

Glad you liked it!

Collapse
 
stuf83 profile image
Stuart •

Looks amazing, will check it out👏👏👏

Collapse
 
arbaoui_mehdi profile image
Arbaoui Mehdi •

Thank you, Glad you liked it!

Collapse
 
marex980 profile image
marex980 •

Beautiful!
Perfect tool for any developer!

Collapse
 
arbaoui_mehdi profile image
Arbaoui Mehdi •

Thanks! Glad you found it helpful.

Collapse
 
rgbink profile image
Anthony DeCrescenzo •

Nicely done, but what about a negative spread?

Collapse
 
arbaoui_mehdi profile image
Arbaoui Mehdi •

Noted! I'll check it out. Thanks for bringing it to my attention!

Collapse
 
crayoncode profile image
crayoncode •

This is truly amazing! Great work!

Collapse
 
arbaoui_mehdi profile image
Arbaoui Mehdi •

Thanks, Glad you liked it 🙏

Collapse
 
anum166 profile image
Anu M •

great !

Collapse
 
arbaoui_mehdi profile image
Arbaoui Mehdi •

Thanks!

Collapse
 
nkilm profile image
Nikhil Mohite •

Makes me appreciate Tailwindcss more

Collapse
 
corscheid profile image
Corey Scheideman •

Looks awesome!

Why is the minimum browser width 1100px or else it refuses outright to be usable?
Any plans to create a responsive layout design that works on more (especially smaller) screen sizes? 👀

Collapse
 
arbaoui_mehdi profile image
Arbaoui Mehdi •

Thank you Corey 🙏

I think this tool is likely optimized for larger resolutions for improved user control. Certain tools may not scale effectively on smaller screens without affecting functionality.