v144 · CSS · demo
Retro Terminal
A classic terminal where the text insertion caret changes between block, bar, and underscore shapes for different editing conventions, while a CSS @keyframes animation handles the blink.
caret-shape support: checking…
cursor shape:
user@showcase:~$
.terminal-input {
caret-shape: block;
caret-color: var(--tc-cursor);
animation: blink-cursor 1s step-end infinite;
}
@keyframes blink-cursor {
0%, 49% { caret-color: var(--tc-cursor); }
50%, 100% { caret-color: transparent; }
}
Terminal caret readout loading…
how it works
The caret-shape property on the <input> sets the cursor shape.
A @keyframes animation toggles caret-color between the green and
transparent every 0.5 s — pure CSS, no JavaScript intervals, no DOM mutations.
Switching shapes swaps a class on the input; the browser re-applies caret rendering immediately.
/* block cursor, custom green, CSS blink */
.terminal-input {
caret-shape: block;
caret-color: var(--tc-cursor);
animation: blink-cursor 1s step-end infinite;
}
@keyframes blink-cursor {
0%, 49% { caret-color: var(--tc-cursor); }
50%, 100% { caret-color: transparent; }
}
/* shape variants — just swap a class */
.terminal-input.shape-bar { caret-shape: bar; }
.terminal-input.shape-underscore { caret-shape: underscore; }
.terminal-input.shape-block { caret-shape: block; }