DEV Community

Cover image for 7 CSS Shadow Generators to Add Depth to Your Designs 🎨😍
Madza
Madza

Posted on • Originally published at madza.hashnode.dev

7 CSS Shadow Generators to Add Depth to Your Designs 🎨😍

Ever wondered why your designs miss some depth? Adding modern-looking shadows can often improve that, especially for separate components like buttons and cards.

Creating shadows directly in CSS requires a lot of patience. I would suggest you consider using some tools instead to save some time.

Here I have compiled some of the best CSS shadow generators to create sleek and modern-looking shadows. All you need to do is mess around with the UI and copy the CSS code when you are ready.

1. Box-shadov.dev

Simple, clean UI and get the job done easily. Usually, my go-to.

1646747925_1920x937.png

2. CSSBud

A generator that lets you create shadows, by generating the code in the preview area.

1646747972_1879x896.png

3. Shadows Brumm

A more advanced generator that allows you to control the count of layers of shadows, transparency, strength, distances, etc.

1646747991_1893x932.png

4. Neumorphism

For those into neuromorphism based designs, this generator is a must-have. Sleek and modern-looking UI.

1646748001_1920x937.png

5. Shadow Palette

Advanced shadow generator with modern UI. Created by one of the best to ever do it when it comes to CSS, Josh W.Comeau.

1646748041_1890x887.png

6. Shadow Examples

If generators are not your thing, here is a huge collection of predefined shadows. Just pick your favorite and the code will be automatically copied.

1646748070_1890x929.png

7. Box-shadow.art

Similar to the previous one offers lots of presets. The difference is that you can select them and further customize them if you don't feel the design entirely yet.

1646748106_1897x928.png


Writing has always been my passion and it gives me pleasure to help and inspire people. If you have any questions, feel free to reach out!

If these resources helped, connect me on Twitter, LinkedIn and GitHub!

Visit my Blog for more articles like this!

Top comments (8)

Collapse
 
imiahazel profile image
Imia Hazel

Hi Madza,
Thanks for the curated list. Here is another fantastic Box Shadow Generator with 100 CSS Box Shadow Examples. I believe it will be admirable for your readers.
Thanks

Collapse
 
madza profile image
Madza

My pleasure to provide these πŸ˜‰
Also thanks for additions βœ¨πŸ‘

Collapse
 
imiahazel profile image
Imia Hazel

Thanks for your optimistic feedback. Your post array is handy for the Dev community.

Thread Thread
 
madza profile image
Madza

Appreciate the kind words πŸ‘βœ¨πŸ’―

Collapse
 
renanfranca profile image
Renan Franca

Thank you for sharing! Doing this kind of CSS from scratch is boring, sometimes you can spend an hour on those websites just having fun testing possibilities πŸ˜†

Collapse
 
madza profile image
Madza

Excatly, thats where these come in πŸ˜‰πŸ‘

Collapse
 
codewithayan10 profile image
Code with Ayan

To be fair, doing it using Code jut feels. Trying and experimenting feels interesting and innovative

Collapse
 
madza profile image
Madza

Thats another approach as well πŸ‘βœ¨πŸ’―