500 Server Error Page

Code

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #fff;
  min-height: 100vh;
  color: #111;
}

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.nav {
  padding: 20px 40px;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

.logo {
  font-size: 20px;
  font-weight: 800;
  color: #111;
  text-decoration: none;
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px 80px;
  text-align: center;
  gap: 20px;
  max-width: 520px;
  margin: 0 auto;
  width: 100%;
}

.error-icon svg {
  width: 80px;
  height: 80px;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.status-badge {
  display: inline-block;
  padding: 4px 14px;
  background: #fef2f2;
  color: #ef4444;
  border: 1px solid #fca5a5;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

h1 {
  font-size: clamp(24px, 5vw, 32px);
  font-weight: 800;
  color: #111;
}

p {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
}

.actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.btn-primary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: #111;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.btn-primary:active {
  opacity: 0.85;
}
.btn-primary svg {
  width: 16px;
  height: 16px;
}

.btn-primary.loading svg {
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  background: #f3f4f6;
  color: #555;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s;
}

.btn-secondary:hover {
  background: #e5e7eb;
}

.info-cards {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}

.info-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: #f9fafb;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  text-align: left;
}

.info-card svg {
  width: 20px;
  height: 20px;
  color: #6b7280;
  flex-shrink: 0;
}
.info-card strong {
  font-size: 13px;
  color: #111;
  display: block;
}
.info-card p {
  font-size: 12px;
  color: #888;
  margin-top: 2px;
}

const retryBtn = document.getElementById("retryBtn");
const retryText = document.getElementById("retryText");
let countdown = null;

function startCountdown(seconds) {
  clearInterval(countdown);
  retryBtn.disabled = true;
  retryBtn.classList.add("loading");

  let remaining = seconds;
  retryText.textContent = `Retrying in ${remaining}s…`;

  countdown = setInterval(() => {
    remaining--;
    if (remaining <= 0) {
      clearInterval(countdown);
      retryBtn.disabled = false;
      retryBtn.classList.remove("loading");
      retryText.textContent = "Try Again";
    } else {
      retryText.textContent = `Retrying in ${remaining}s…`;
    }
  }, 1000);
}

retryBtn.addEventListener("click", () => {
  startCountdown(5);
  // In a real app: window.location.reload();
});

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>500 — Server Error</title>
  </head>
  <body>
    <div class="page">
      <nav class="nav">
        <a href="#" class="logo">Brand</a>
      </nav>

      <main class="content">
        <div class="error-icon">
          <svg viewBox="0 0 80 80" fill="none">
            <circle cx="40" cy="40" r="36" fill="#fef2f2" stroke="#fca5a5" stroke-width="2"/>
            <path d="M40 24v18" stroke="#ef4444" stroke-width="3.5" stroke-linecap="round"/>
            <circle cx="40" cy="52" r="2.5" fill="#ef4444"/>
          </svg>
        </div>

        <div class="status-badge">500 Internal Server Error</div>

        <h1>Something went wrong</h1>
        <p>Our servers are having a moment. The team has been automatically notified and is working on a fix.</p>

        <div class="actions">
          <button class="btn-primary" id="retryBtn">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 .49-4.95"/></svg>
            <span id="retryText">Try Again</span>
          </button>
          <a href="#" class="btn-secondary">Go Home</a>
        </div>

        <div class="info-cards">
          <div class="info-card">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 13a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9a16 16 0 0 0 6 6l.75-.75a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 21.48 17z"/></svg>
            <div><strong>Contact Support</strong><p>support@brand.com</p></div>
          </div>
          <div class="info-card">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
            <div><strong>Status Page</strong><p>status.brand.com</p></div>
          </div>
        </div>
      </main>
    </div>
    <script src="script.js"></script>
  </body>
</html>

A professional server error page that acknowledges the issue, provides a retry option, and offers a support contact path. Designed to reduce user frustration.

Features

Animated pulse on the error icon
Auto-retry countdown with JavaScript
Status badge showing error code
Support link and social proof that the team is notified

When to use it

API gateway or backend error fallback
Catch-all server error handler in Express / Next.js