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 😁🔥