This site provides tools for converting text/images into CSS "bitmaps" using the box-shadow property. The result is web-available content that 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, svg, canvas, or other similar source! I created this tool to help developers make it harder for bots to scrape web content without permission.

Generate CSS that prints text




Choose a font:























Read the alpha channel values for better text quality. Disable for an interesting effect.
There is a known bug, where text may look aliased when a background color is set.


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.


This exposes the prerender canvas, which is an intermediate step in the CSS generation. If your output doesn't look as expected, enabling this may help diagnose the problem.

Prerender canvas:



Render preview: