We write this post because we want to recommend some useful sites to add box-shadow quickly to your elements, using CSS.
As you may already know the CSS box-shadow property adds shadow effects around the frame of an element, and this can be very useful if we want to give the elements of our website depth, creating the idea that they are at different levels from the background. This can also give an idea of proximity as if the elements were closer, more within our reach, this allows to draw the attention of users to specific elements.
Thus, for example with the following css code:
box-shadow: 20px 33px 15px -3px rgba(0,0,0,0.1);
We can achieve the following effect:
But let’s say we have this situation, we’re a freelancer and we’ve been asked for a 1 day turnaround time for a landing page, so we’re in a bit of a rush to add this effect to a specific element. This is where the sites we mentioned at the beginning come in.
On the getcssscan.com website they have a section called “Beautiful CSS box-shadow examples” with 93 examples ready to copy and paste into your own css with just 1 click. All those box-shadows were copied using the website’s own CSSScan tool, a very clever and subtle way to promote their service while providing a very useful tool.
The same happens with the website csshint.com where they also dedicate one of their pages to the same purpose of the previous one, 76 css box shadow examples ready to copy and paste in our css code. Great, don’t you think?
The truth is that on the internet we can find several websites to generate custom box-shadows, to give concrete examples websites like box-shadow.dev or cssmatic.com achieve in theory the same function, but they are parameterizable. You generate your own box-shadow depending on the opacity, color, radius and other aspects you require.
They are tools to take a little more time and create them to your liking. Of course, just as useful as the previous ones.
In conclusion, if you are looking to add a box-shadow effect quickly you will have a little more than 93 styles to choose from and just a click away from being copied. If you want to add a more customized style, you can resort to online generators. Box-shadow, a css property that can make the element to which it is applied the protagonist of the section in which it is located.
Thanks for reading, see you in a future post.
