DistorsionGratuit

CRT Monitor Effect

Un moniteur cathodique en pur CSS : texte vert phosphore sur fond noir, lignes de balayage, coins assombris, et un léger faiblissement des lignes toutes les 4 secondes.

CSSPseudo-elementsRetro

Mis à jour le 8 novembre 2026

> SYSTEM BOOT OK
> LOADING DATA...
> READY_

Survolez ou cliquez la scène pour interagir

Cet effet est gratuit — la catégorie Distorsion en contient 31 au total, dont 5 gratuits. Effect.Labs regroupe 840 effets vanilla. Découvrir la catégorie →

Voir dans le catalogue Compte gratuit : aperçu en direct + 1 effet offert

Exemples d'usage

SombrecourtAffaire du quai 9 · jour 2

> FICHE : SUSPECT N° 3
> ALIAS : LE GRIS
> ALIBI : NON VÉRIFIÉ
> DERNIÈRE VUE : 23 H 10_

① Fiche du suspect dans un jeu d'enquête

QuandDans un jeu d'enquête au navigateur, le bureau de l'enquêteur montre un dossier papier à gauche et, à droite, le moniteur vert qui affiche la fiche du suspect ; les boutons « Interroger » et « Accuser » font avancer la partie.

PourquoiLe moniteur pose l'ambiance d'un commissariat des années 80 sans image : quatre lignes de texte suffisent, et le joueur peut les lire, les copier ou les faire lire par un lecteur d'écran.

Réglages--crtm-w: 270px, --crtm-size: 13px, --crtm-root-h: 0, --crtm-page: transparent ; quatre lignes au lieu de trois. En dessous de 470 px de large, le dossier disparaît et le moniteur prend toute la largeur.

Vifrelle

Test de réflexes

Cliquez pour commencer, attendez le vert, puis cliquez le plus vite possible.

> PRÊT
> MEILLEUR : 231 MS
> ESSAIS : 0/5_

② Résultat d'un test de réflexes

QuandLe visiteur clique sur « Commencer », attend que le bouton passe au vert puis clique : le moniteur affiche son temps en millisecondes, son meilleur temps et le nombre d'essais. Un clic trop tôt affiche « TROP TÔT ! ». Le test fonctionne au clavier (Entrée ou Espace).

PourquoiLe résultat arrive dans un écran « machine », ce qui donne au chiffre l'allure d'une mesure ; la lueur et le faiblissement rendent l'attente moins austère qu'un simple texte.

Réglages--crtm-w: 250px, --crtm-size: 14px. Le petit script de la scène compte le temps et réécrit le texte des trois lignes ; le moniteur porte aria-live="polite" dans le HTML de la scène. L'effet lui-même ne contient aucun script.

Votre site en ligne ce soir, sauvegardes comprises.

Serveurs en France, sauvegarde chaque nuit, un humain au téléphone.

Voir les offres

③ État des serveurs dans le pied de page d'un hébergeur

QuandDans le pied de page d'un hébergeur, à côté des liens et de l'adresse, un petit moniteur liste l'état de deux salles serveurs et l'heure de la dernière sauvegarde.

PourquoiRéduit à 190 px, le moniteur devient un clin d'œil technique qui rassure : les mots « OK » en vert se lisent d'un regard, au milieu d'un pied de page autrement sobre.

Réglages--crtm-w: 190px, --crtm-size: 11px, --crtm-frame: #334155 pour accorder le cadre au pied de page ; la scène réduit aussi la marge intérieure (padding: 10px 14px) et le cadre (5 px).

Comment ça marche

.crtm-monitor dessine l'écran : fond #0a0a0a, cadre gris de 8 px aux coins arrondis, 280 px de large par défaut, et une lueur verte intérieure (box-shadow: inset). Le texte de .crtm-content s'affiche en Courier New, vert #33ff33, avec un text-shadow de 8 px qui imite la rémanence du phosphore.

Deux pseudo-éléments couvrent l'écran sans capter la souris : ::before trace des lignes de balayage (2 px transparents, 2 px de noir à 15 %), ::after assombrit les bords par un dégradé radial (transparent jusqu'à 60 %, puis noir à 50 %). Ce vignettage donne l'impression d'un tube bombé ; l'image n'est pas réellement courbée.

Chaque <span> du texte suit l'animation crtmFlicker de 4 s : rien pendant 92 % du temps, puis l'opacité descend à 0,7, remonte, redescend à 0,8 et revient à 1. Les lignes sont du vrai texte, à remplacer librement. Aucun JavaScript ; les réglages passent par des variables CSS.

Accessibilité

Texte réel : les lignes sont du texte HTML, lu tel quel par les lecteurs d'écran et sélectionnable. Le chevron « > » sera lu ; retirez-le si le contenu est important.
Contraste : vert #33ff33 sur #0a0a0a, rapport d'environ 14:1, largement au-dessus du seuil AA. Le vignettage assombrit seulement les coins.
Réduire les animations : sous prefers-reduced-motion: reduce, le faiblissement périodique est coupé ; le texte reste affiché en continu.
Aucune interaction : l'effet n'ajoute ni bouton ni élément focalisable. Si vous écrivez dans les lignes par script (score, statut), ajoutez aria-live="polite" sur le moniteur pour que le changement soit annoncé.

Compatibilité navigateur

CSS seul, aucune dépendance. Dégradés, box-shadow intérieure, animations et variables CSS existent partout depuis longtemps ; la propriété la plus récente est prefers-reduced-motion (Chrome 74, Firefox 63, Safari 10.1, d'après les données MDN). Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : rendu identique, deux copies indépendantes, largeur fluide jusqu'à 100 %.

Chrome 74+✓ Complet (mesuré)

Firefox 63+✓ Complet (mesuré)

Safari 10.1+✓ Complet (mesuré sous WebKit)

Edge 79+✓ Complet

Mobile iOS 10.3+✓ Complet

Android Chrome 74+✓ Complet

Dans un navigateur sans prefers-reduced-motion, le faiblissement joue toujours, sans autre conséquence. Sans variables CSS (navigateurs très anciens), les réglages sont ignorés et le moniteur garde ses valeurs par défaut.

Le code

Copiez les deux blocs (HTML et CSS) dans votre page. Aucun JavaScript, aucune dépendance.

HTML

<div class="fx-0271-root">
  <div class="crtm-monitor">
    <div class="crtm-content">
      <span>&gt; SYSTEM BOOT OK</span><br>
      <span>&gt; LOADING DATA...</span><br>
      <span>&gt; READY_</span>
    </div>
  </div>
</div>

CSS

.fx-0271-root,.fx-0271-root *,.fx-0271-root *::before,.fx-0271-root *::after{box-sizing:border-box}

/* Settings (all optional, set them on .fx-0271-root or a parent):
   --crtm-w        monitor width (280px; 100% fills the parent)
   --crtm-color    phosphor color of the text (#33ff33)
   --crtm-glow     text glow (rgba(51,255,51,.6))
   --crtm-size     text size (14px)
   --crtm-frame    frame color (#2a2a2a)
   --crtm-page / --crtm-root-h  wrapper background and min height (rgb(10,10,15) / 280px) */
.fx-0271-root{display:flex;align-items:center;justify-content:center;width:100%;min-height:var(--crtm-root-h,280px);position:relative;background:var(--crtm-page,rgb(10,10,15));color:#fff;font-family:sans-serif}

.crtm-monitor{background:#0a0a0a;border:8px solid var(--crtm-frame,#2a2a2a);border-radius:20px;padding:24px;position:relative;overflow:hidden;width:var(--crtm-w,280px);max-width:100%;min-height:160px;box-shadow:inset 0 0 60px rgba(0,255,0,.1),0 0 20px rgba(0,0,0,.5)}

/* scanlines */
.crtm-monitor::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.15) 2px,rgba(0,0,0,.15) 4px);pointer-events:none;z-index:2}

/* vignetting */
.crtm-monitor::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.5) 100%);pointer-events:none;z-index:3}

.crtm-content{color:var(--crtm-color,#33ff33);font-family:"Courier New",monospace;font-size:var(--crtm-size,14px);line-height:1.6;text-shadow:0 0 8px var(--crtm-glow,rgba(51,255,51,.6));position:relative;z-index:1}

/* every 4s the lines dim briefly, like an old tube */
.crtm-content span{animation:crtmFlicker 4s infinite}

@keyframes crtmFlicker{0%,to{opacity:1}92%{opacity:1}93%{opacity:.7}94%{opacity:1}96%{opacity:.8}97%{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .crtm-content span{animation:none}
}

JavaScript

CSS pur — aucun JavaScript requis.

Personnaliser

Options passées à l'API ou attributs data-* :

Option / propriété	Défaut	Effet
Largeur (CSS — `--crtm-w`)	280 px	`100%` remplit le parent ; le moniteur ne dépasse jamais son conteneur (`max-width: 100%`).
Couleur du texte (CSS — `--crtm-color`)	`#33ff33`	Ambre `#ffb000` pour un terminal orangé, blanc bleuté `#d8ecff` pour un écran plus froid. Pensez à accorder `--crtm-glow`.
Lueur (CSS — `--crtm-glow`)	`rgba(51, 255, 51, .6)`	Couleur du halo de 8 px autour des lettres ; `transparent` donne un texte net, sans rémanence.
Taille du texte (CSS — `--crtm-size`)	14 px	11 px pour un petit widget, 18 px et plus pour un écran de titre. L'interligne reste à 1,6.
Couleur du cadre (CSS — `--crtm-frame`)	`#2a2a2a`	Beige `#cfc6b0` pour un boîtier d'ordinateur ancien, ou la couleur de votre interface pour fondre le moniteur dans la page.
Lignes de texte (HTML — les `<span>` de `.crtm-content`)	3 lignes, séparées par `<br>`	Ajoutez ou retirez des lignes ; chaque span faiblit en même temps que les autres.
Cadre de démonstration (CSS — `--crtm-page`, `--crtm-root-h`)	`rgb(10, 10, 15)`, 280 px de haut au minimum	`transparent` et `0` pour poser le moniteur dans votre page sans bande sombre autour.

FAQ

L'écran est-il vraiment bombé ?

Non. L'impression de courbure vient du vignettage (bords assombris par un dégradé radial) et des coins arrondis. Le texte n'est pas déformé, ce qui le garde parfaitement lisible.

Comment afficher un texte qui change, comme un score ?

Remplacez le contenu d'un <span> par script (span.textContent = '> SCORE : 247'). Ajoutez aria-live="polite" sur .crtm-monitor pour que les lecteurs d'écran annoncent la nouvelle valeur.

Le faiblissement toutes les 4 secondes peut-il gêner ?

Il est bref et faible (opacité 0,7 au plus bas), loin d'un clignotement. Il s'arrête de lui-même quand le visiteur a demandé moins d'animations, et vous pouvez le couper partout en retirant la règle animation de .crtm-content span.

Fondamentaux

Design & Visuels

Animations & Scroll

Galerie & Plus

CRT Monitor Effect