How to Make a Fake Blue Screen of Death With HTML and JavaScript

Updated October 8, 2026 · 5 min read · By the Hacker Typer team

A blue screen of death is the simplest prank screen to build, because the real one is only text on a coloured background. This page gives you the full file and explains each part in plain language.

The complete code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>:(</title>
  <style>
    body {
      margin: 0; height: 100vh; box-sizing: border-box;
      padding: 8% 12%;
      background: #0b5cad; color: #fff;
      font-family: "Segoe UI", Arial, sans-serif;
      display: flex; flex-direction: column; justify-content: center;
      cursor: none;
    }
    .face { font-size: 130px; line-height: 1; margin-bottom: 20px; }
    .big { font-size: 28px; margin: 0 0 16px; }
    .small { font-size: 16px; margin-top: 24px; }
  </style>
</head>
<body>
  <div class="face">:(</div>
  <p class="big">Your computer ran into a problem and needs to restart.</p>
  <p class="big"><span id="percent">0</span>% complete</p>
  <p class="small">Stop code: COFFEE_NOT_FOUND</p>

  <script>
    const percentText = document.getElementById("percent");
    let percent = 0;

    setInterval(function () {
      if (percent < 100) {
        percent = percent + Math.floor(Math.random() * 4);   // jump 0 to 3
        if (percent > 100) percent = 100;
        percentText.textContent = percent;
      }
    }, 900);

    document.addEventListener("dblclick", function () {
      document.documentElement.requestFullscreen();
    });
  </script>
</body>
</html>

How to use this code

1. Get the file. Press Download above the code to save it as fake-blue-screen.html. Or press Copy code, paste it into a plain text editor (Notepad on Windows, TextEdit in plain-text mode on a Mac, or a code editor such as VS Code) and save it as fake-blue-screen.html. The name must end in .html, not .txt.
2. Open it. Double-click the file. It opens in your web browser and starts working straight away.
3. Change it. Open the same file in the text editor, edit something, save, and refresh the browser page to see the result.

Nothing needs to be installed, and the file works without an internet connection.

Double-click the page to go full screen. Press Esc to leave.

How the code works

• The layout. padding: 8% 12% leaves space around the text, and the three flex lines push the content to the vertical middle while keeping it left-aligned, like the real screen.
• The sad face. It is the two characters :( made very large with font-size: 130px.
• The counter. Every 900 milliseconds the code adds a random number from 0 to 3. Math.random() gives a decimal between 0 and 1, multiplying by 4 stretches it to between 0 and 4, and Math.floor rounds it down. The uneven steps look more like a real computer than a steady count.
• The stop. if (percent < 100) means the number stops rising at 100.
• The page title. <title>:(</title> is what shows on the browser tab before you go full screen.

Easy changes to try

Use it kindly

A crash screen can make someone think they have lost their work. Use it on people who will laugh, reveal it within seconds, and never use it to convince anyone to phone a "support" number. That is how real scams work.