TIL of this repo who made box shadow images

POSTED ON: Apr 16, 2022

The box-shadow property in CSS is for putting shadows on elements (sometimes referred to as “drop shadows”, ala Photoshop/Figma).

which uses this syntax:

box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];

Notice something? That's right! You can make a single-pixel box shadow. You can also create multiple versions on the same line.

// single pixel
box-shadow: 100px 100px 0px rgb(0, 0, 0);

// multiple box shadows
box-shadow: 100px 100px 0px rgb(0 0 0),
            100px 100px 1px rgb(0 0 0),
            100px 100px 3px rgb(0 0 0);

via CSS TRicks

Well, anything you can make 1 pixel of, you can make it into images.

Behold: This repo turns images into their box-shadow equivelent!
https://github.com/AriPerkkio/img-to-box-shadow

Additionally, this is incredibly incredibly resource-intensive. 7meg CSS image? Heck yeah!

Related TILs

Tagged: codepen

TIL Shape-Outside to wrap text

Shape-outside provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than simple boxes.

Feb 08, 2023

TIL Math.random() for design tricks

Math.random() is awesome! However, if you dealing with sensitive applications and need a more secure method of randomization, I’d recommend WebCrypto.

Nov 20, 2022

TIL How to implement two-way binding without a framework

One of the reasons we use React or Vue is because of that sweet sweet two-way binding. It's the automatic syncing of data between the model (data) and the view (UI) in both directions. Any changes made to the data will automatically update the view, and any changes made to the view will automatically update the data.

Nov 14, 2022