Out Of Body

This site provides a tool that uses text input to generate a CSS bitmap using the box-shadow property, so the resulting text is not represented anywhere in the body of the HTML document.

For example, if you inspect this page, you'll notice the cursive-font title at the top does not have any backing text, image, canvas, svg, or other source!

I created this tool to help developers make it harder for AI to scrape web content without permission.

Generate CSS that prints text

Input text:

Font size (px):

Font color:

Anti-alias:
Read the alpha channel values for better text quality. Disable for an interesting effect.

Paint background:
Painting the background sets every pixel, not just the font text. It may help with readability if your site supports multiple themes, but expect the CSS to be at least 2x larger.

Background color:

Prerender canvas:

Render preview:

Encoded output:

TODO:

Feature: Images as CSS (build example POC code into the generator)
Bug: Anti-aliased text with background color set can look aliased (try painting background first?)
Feature: Allow arbitrary font selection via textbox.