https://shadows.joeczubiak.com
I built an open-source CSS box-shadow generator this week.
I was trying out WebFlow the other day and I noticed that like a lot of visual editors, it lets you specify an angle and distance on your box-shadows but both angle and distance aren't CSS attributes on box-shadow. So I decided to explore how angle and distance are converted to an x and y offset.
I started to write an article detailing the math behind it, turns out it's basic trigonometry and if I was still in 9th grade it would have been obvious, but before you know it and before the article was done I built and released my own CSS generator.
It taught me a lot about shadows and was a good overall exercise that I hope will now live on to help others.
I found that a good shadow is built with layers and opacity and mimic real-world behavior. The ability to specify multiple layers in a box-shadow isn't intuitive and most box-shadow generators online don't allow multiple shadows to be specified. They also don't typically give you a great preview. This is where I tried to make mine different. I made it easy to add multiple shadows, the page and preview cards are customizable, and there are presets from popular frameworks.
Take a look and let me know what you think. I built it this week so it's not totally polished and I'm open to suggestions.
Thanks!
Top comments (0)