Using the Box Shadow Editor in Google Chrome


Chrome - Misc

February 08, 2020

Happy Saturday guys! What's up? Today i want to show you something really neat that i found recently on Google Chrome: the box shadow editor!

<button>Click me</button>

Basically when you open the Chrome DevTools, go to the 'Elements' tab and select an element, you can click that little icon next to the 'box-shadow' rule (see in the video) and it will open this modal where you can edit the element's box-shadow and preview it in real time!

button { background-color: #007EFF; color: #fff; border: none; font-size: 16px; font-weight: 500; letter-spacing: 1px; padding: 15px 30px; border-radius: 25px; box-shadow: 0 6px 8px 2px rgba(0,0,0,.16); }

Here, you can mess around with all the settings that are part of box-shadow, including the type: 'outset' for the outter shadow and 'inset' to create a inner shadow.

Go give it a try if you haven't, its really handy! Have a nice weekend guys 😁🔥