CRT effect: an old monitor on a modern page
Scanlines, glowing phosphor, a slight bulge and a flicker you feel more than see. What makes a screen look like a CRT, a CSS overlay you can drop on any element, and a skill that builds a booting terminal hero.
Free skills to start. Pro is $79 a year for every skill, or $9.99 a month for 10. See pricing
What is a crt effect?
A CRT effect imitates the cathode-ray tube monitors of the 70s to 90s. The cues people recognize are dark horizontal scanlines, text that glows and bleeds a little, a picture that bulges toward the corners, a dark vignette and a faint flicker or rolling band.
It is a shortcut to retro computing, terminals, hacker aesthetics, synthwave and game launch pages. Green or amber text on near-black is the classic; a beige plastic case suits a light page.
How the effect works
Scanlines are a repeating gradient: one dark pixel row, two clear ones, laid over the content. Glow is text-shadow in the text color, or a blurred copy of the screen added on top. The vignette is a radial gradient that darkens the edges.
Curvature and color fringing need real image processing, so a convincing tube is a shader. It samples the screen through a barrel distortion, splits red, green and blue slightly, adds bloom and multiplies an aperture grille pattern. CSS gets you most of the feel at almost no cost.
01
Lay down scanlines
repeating-linear-gradient with a dark 1 px row every 3 px, on a pseudo-element over the screen.
02
Make the phosphor glow
Bright text color plus a text-shadow of the same color at 4 to 8 px.
03
Darken the edges
A radial-gradient vignette and rounded corners hint at the curved glass.
04
Flicker gently
Dip the brightness by a few percent at irregular steps. Strong flicker tires the eye fast.
HTML
A CRT screen overlay in CSS
Scanlines and vignette on pseudo-elements over a real text block, with a soft flicker that stops for reduced motion. No JavaScript.
<div class="crt"><pre>READY.
LOAD "LAUNCH",8,1
SEARCHING FOR LAUNCH
LOADING...
RUN_</pre></div>
<style>
.crt {
position: relative; overflow: hidden;
max-width: 640px; padding: 32px 40px;
background: radial-gradient(ellipse at center, #0b2a14 0%, #031008 75%);
border-radius: 28px / 22px;
color: #7dff9a; text-shadow: 0 0 6px rgb(80 255 120 / 0.8);
font: 20px/1.5 ui-monospace, Menlo, monospace;
}
.crt pre { margin: 0; }
.crt::before, .crt::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.crt::before {
background: repeating-linear-gradient(to bottom, rgb(0 0 0 / 0.38) 0 1px, transparent 1px 3px);
}
.crt::after {
background: radial-gradient(ellipse at center, transparent 58%, rgb(0 0 0 / 0.6) 100%);
animation: flicker 4s steps(1) infinite;
}
@keyframes flicker {
0%, 100% { opacity: 1; }
41% { opacity: 0.88; }
43% { opacity: 1; }
77% { opacity: 0.93; }
}
@media (prefers-reduced-motion: reduce) { .crt::after { animation: none; } }
</style>A starting point written for this page, free to use in your own projects. The skills below build the finished version with checks, fallbacks and a recorded video.
What to get right on a real page
01
Scale scanlines with the screen
Fixed 1 px lines alias into moiré stripes on some zoom levels. Size them in CSS pixels and test at 100 % and 125 %.
02
Keep the text real
Put the effect over live text, not a picture of text, so it stays selectable and indexable.
03
Go easy on flicker
A few percent of brightness is plenty, and never more than three flashes a second.
04
Freeze it for reduced motion
Respect prefers-reduced-motion: show one finished frame instead of the loop. A visitor who turned motion off still gets the look.
Skills that build a crt effect
A finished terminal hero with the full tube treatment and a boot story about your product.
- CRT Terminal HeroClaude CodeCodexCursor+3 more agents
Motion Heroes · Pro
CRT Terminal Hero
Animated WebGL hero · page + embed + 1080p video
A curved phosphor tube that switches on from a bright line, runs a memory test, prints boot lines with their [ OK ]s, types a command and prints your banner at double size, then collapses to a dot and loops. Scanlines, aperture grille, bloom, flicker, a rolling refresh band and a glass reflection that follows the pointer, in green, amber or your color.
Worth knowing: Lines are 32 to 64 characters and the screen plays a fixed script.
Needs: Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
See what CRT Terminal Hero makes
Install
Build a crt effect with your agent
Each skill is a SKILL.md folder, so it installs the same way in Claude Code, Codex, Cursor and other agents. The example below uses CRT Terminal Hero; each skill page has its own prompt.
1. Paste the install prompt
Your agent runs the installer. The first time, it shows a sign-in link so you can approve it in the browser.
Install the "CRT Terminal Hero" skill from Lookbk (https://lookbk.dev/skills/crt-terminal-hero). 1. Run: curl -fsSL https://lookbk.dev/cli.js | node - add crt-terminal-hero 2. If it prints a sign-in link, show it to me. When I say I approved it, run the same command again. 3. When the install finishes, read the SKILL.md it installed and tell me what you need from me to make the first result.
Or run it in a terminal
curl -fsSL https://lookbk.dev/cli.js | node - add crt-terminal-hero2. Start a new session
Agents load skills when a session starts. The installer writes the folder where your agent looks:
- Claude Code
- ~/.claude/skills/crt-terminal-hero
- Codex
- ~/.agents/skills/crt-terminal-hero
- Cursor
- ~/.agents/skills/crt-terminal-hero
3. Ask for the result
Describe it in plain words, for example:
Build a CRT Terminal hero for Pipewren, our CI service: a green phosphor monitor on near-black that boots our runner, types 'pipewren run --branch main', prints the test results and ends on SHIPPED, headline 'Your pipeline, warm before you push.', and record the launch video.
Another agent? Install a skill in any agent
FAQ
Questions
Still stuck? The guides cover installing, agents and licensing in more detail.
Read the guidesHow do I add scanlines in CSS?
Put a pseudo-element over the screen with background: repeating-linear-gradient(to bottom, rgb(0 0 0 / .35) 0 1px, transparent 1px 3px) and pointer-events: none.
How do I make the screen look curved?
CSS can fake it with rounded corners and a vignette. True barrel distortion needs a WebGL shader that samples the picture through a curve, which is what CRT Terminal Hero uses.
What colors did CRT terminals use?
Green (P1 phosphor) and amber (P3) were the classic monochrome screens, with white for later ones. Glow works best with a bright, saturated text color on a very dark green or brown-black.
Does a CRT effect hurt readability?
Light scanlines and glow do not. Strong flicker, heavy blur and low contrast do. Keep body text out of the effect and use it for short lines.