<div class="cyber-table-wrapper">
  <div class="cyber-header">
    <h3>NETWORK PROTOCOLS</h3>
    <span class="blinking-cursor">_</span>
  </div>
  
  <table class="cyber-table">
    <thead>
      <tr>
        <th>NODE ID</th>
        <th>STATUS</th>
        <th>PING</th>
        <th>LOCATION</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>NX-001</td>
        <td class="status-online">ONLINE</td>
        <td>12ms</td>
        <td>TOKYO</td>
      </tr>
      <tr class="row-warning">
        <td>NX-002</td>
        <td class="status-warn">WARNING</td>
        <td>145ms</td>
        <td>LONDON</td>
      </tr>
      <tr>
        <td>NX-003</td>
        <td class="status-online">ONLINE</td>
        <td>8ms</td>
        <td>NEW YORK</td>
      </tr>
      <tr class="row-danger">
        <td>NX-004</td>
        <td class="status-offline">OFFLINE</td>
        <td>---</td>
        <td>BERLIN</td>
      </tr>
    </tbody>
  </table>
</div>

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

body {
  font-family: "Courier New", Courier, monospace;
  margin: 0;
  background: #050505;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
}

.cyber-table-wrapper {
  width: 100%;
  max-width: 700px;
  background: rgba(0, 20, 10, 0.8);
  border: 1px solid #00ffcc;
  box-shadow: 0 0 20px rgba(0, 255, 204, 0.2), inset 0 0 20px rgba(0, 255, 204, 0.1);
  position: relative;
  /* Cut off the corners securely */
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}

.cyber-header {
  background: #00ffcc;
  color: #000000;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.cyber-header h3 {
  margin: 0;
  font-size: 1.25rem;
  letter-spacing: 2px;
}

.blinking-cursor {
  font-size: 1.5rem;
  font-weight: bold;
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

.cyber-table {
  width: 100%;
  border-collapse: collapse;
  color: #00ffcc;
}

.cyber-table th, .cyber-table td {
  padding: 16px 24px;
  text-align: left;
  border-bottom: 1px solid rgba(0, 255, 204, 0.2);
}

.cyber-table th {
  font-weight: bold;
  letter-spacing: 1px;
  background: rgba(0, 255, 204, 0.1);
}

.cyber-table tbody tr {
  transition: background 0.2s, text-shadow 0.2s;
}

.cyber-table tbody tr:hover {
  background: rgba(0, 255, 204, 0.15);
  text-shadow: 0 0 8px #00ffcc;
  cursor: crosshair;
}

.status-online { color: #00ffcc; }
.status-warn { color: #ffcc00; }
.status-offline { color: #ff003c; }

.row-warning:hover {
  background: rgba(255, 204, 0, 0.15);
  text-shadow: 0 0 8px #ffcc00;
  color: #ffcc00;
}

.row-danger:hover {
  background: rgba(255, 0, 60, 0.15);
  text-shadow: 0 0 8px #ff003c;
  color: #ff003c;
}

Back to Snippets

Cyberpunk Glowing Data Table CSS

Present statistics with a stunning cyberpunk glowing data table. We utilized high-contrast neon borders and sharp geometric layouts to create an aggressive, futuristic aesthetic.

245

#css

#cyberpunk

#neon

#table

#data grid

#futuristic

#glowing

#dark mode

Run /HTML *CSS ()JS Output Console0 Live Updates Focus

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

body {
  font-family: "Courier New", Courier, monospace;
  margin: 0;
  background: #050505;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
}

.cyber-table-wrapper {
  width: 100%;
  max-width: 700px;
  background: rgba(0, 20, 10, 0.8);
  border: 1px solid #00ffcc;
  box-shadow: 0 0 20px rgba(0, 255, 204, 0.2), inset 0 0 20px rgba(0, 255, 204, 0.1);
  position: relative;
  /* Cut off the corners securely */
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}

.cyber-header {
  background: #00ffcc;
  color: #000000;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.cyber-header h3 {
  margin: 0;
  font-size: 1.25rem;
  letter-spacing: 2px;
}

.blinking-cursor {
  font-size: 1.5rem;
  font-weight: bold;
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

.cyber-table {
  width: 100%;
  border-collapse: collapse;
  color: #00ffcc;
}

.cyber-table th, .cyber-table td {
  padding: 16px 24px;
  text-align: left;
  border-bottom: 1px solid rgba(0, 255, 204, 0.2);
}

.cyber-table th {
  font-weight: bold;
  letter-spacing: 1px;
  background: rgba(0, 255, 204, 0.1);
}

.cyber-table tbody tr {
  transition: background 0.2s, text-shadow 0.2s;
}

.cyber-table tbody tr:hover {
  background: rgba(0, 255, 204, 0.15);
  text-shadow: 0 0 8px #00ffcc;
  cursor: crosshair;
}

.status-online { color: #00ffcc; }
.status-warn { color: #ffcc00; }
.status-offline { color: #ff003c; }

.row-warning:hover {
  background: rgba(255, 204, 0, 0.15);
  text-shadow: 0 0 8px #ffcc00;
  color: #ffcc00;
}

.row-danger:hover {
  background: rgba(255, 0, 60, 0.15);
  text-shadow: 0 0 8px #ff003c;
  color: #ff003c;
}