Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

You could add these styles to get closer to the CRT look:

Add these to the body style:

    text-shadow: 1px 1px 6px #8aff00;
    filter: blur(0.3px);
    background-image: repeating-linear-gradient( to bottom, rgb(0 0 0), rgb(0 255 76 / 7%) 3px, rgb(100 100 100 / 23%) 7px );
Also bump the font-size to 18px, it looks a bit better imho.


Whoah, that's very cool! Looks great!! Thanks so much Tibor, appreciate it. :)


I did something like that a year ago for mine (but never published it), complete with scanlines, glow, and beam scan effect. It also handles images as well, making them monochrome, tinted, and subject to scanline bleeding as well. All in CSS so it's very fake but somewhat convincing, and probably not the most optimal way to do it (CPU is like 40% pegged)


I've also made an indie music TV project with this CRT effect and some text animation for retro terminal vibes. If you wait a bit, the ui glitches :) Fun fact, my USB-C monitor connections has a contact error and it produces a similar glitch effect.

(I have a link to it in my bio)




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: