What is Out Of Body?
Out Of Body is a tool for web designers, created with the philosophy that web content does not need to be represented in the DOM. Hence the term: "Out Of <Body>". It doesn't require anything besides vanilla CSS. No, seriously - did you know this was possible?
How can text and images be represented without the DOM?
The CSS box-shadow property lets us layer multiple independent shadows to make pretty UIs, but I recently discovered that these shadows can be single pixels! I thought this was unusual, so I decided to exploit it: I created this tool, which paints your text/image to a canvas, then reads each pixel value off the canvas, and outputs the values in a format compatible with box-shadow.
What's the point?
There are some benefits to using this approach! You can:
- âïž provide your email address without it being picked up by bots
- đ upload images without risking a metadata leak
- đ post original content without LLMs stealing it
- đ share photos that users can't download
- đŠč provide text that can't be copied
- đ€ ... or figure out another unique use case?
Want to try it out?
Click a button below to get started:
Or just see some examples?
You can see my list of examples here.
You can also inspect this page: The "Out Of Body - CSS Generator" text above the navbar, the "my box-shadow text" and the image of a cat on this page are all live examples of text and images represented without DOM content.