Show HN: Pixel text renderer using CSS linear-gradients (no JavaScript) https://ift.tt/6P91sUE

Show HN: Pixel text renderer using CSS linear-gradients (no JavaScript) I've been playing around with rendering pixel text using only CSS. No JS in the final result, and no per-pixel DOM elements (too heavy). The demo page is rendered as a long list of CSS linear-gradients. Each letter is an 8x8 matrix. Each pixel becomes a tiny background image. Demo: https://taktek.io Gallery/Debugger: https://ift.tt/cfMEOT6 Code: https://ift.tt/g6pCBOJ At first, I wrote each linear-gradient pixel manually... When I came to resize each pixel's size, I wrote the generator script. 1. It takes the text -> 2. breaks it into letters -> 3. gets its matrix -> 4. returns the linear-gradients list. It chooses a variant based on the context window. For example, a period after a sentence ("hello.") should look different than inside a domain ("example.com"). My workflow now is: open the gallery -> generate the CSS in the console -> copy the result into the static page. It's very small and a dumb tool, but I want it for an upcoming project. If you have any feedback, maybe some pitfalls, or a better approach, I'd love to hear them. https://taktek.io December 10, 2025 at 12:48AM