Code Playground

Paste HTML, CSS, and JavaScript, then click View to render it instantly. This is useful for testing small snippets, logos, landing sections, buttons, and UI ideas directly in Chrome.

Documentation & Complete Guide

Auto preview while typingReady

HTML

CSS

:root {
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at top, rgba(0, 198, 255, 0.18), transparent 35%),
    linear-gradient(160deg, #08111f 0%, #0f172a 45%, #020617 100%);
  color: #e5f3ff;
  font-family: "Segoe UI", sans-serif;
}

.hero {
  width: min(92vw, 680px);
  padding: 48px 32px;
  border-radius: 24px;
  background: rgba(7, 15, 28, 0.84);
  border: 1px solid rgba(94, 234, 212, 0.22);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
}

.eyebrow {
  display: inline-block;
  margin-bottom: 16px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.14);
  color: #86efac;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1 {
  margin: 0 0 12px;
  font-size: clamp(44px, 9vw, 88px);
  line-height: 0.95;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

p {
  margin: 0 0 18px;
  color: #cbd5e1;
  font-size: 17px;
  line-height: 1.7;
}

button {
  border: 0;
  border-radius: 999px;
  padding: 12px 22px;
  background: linear-gradient(135deg, #06b6d4, #3b82f6);
  color: white;
  font-weight: 700;
  cursor: pointer;
}

JavaScript

Live PreviewIf auto preview is off, click View Preview after editing.

How To Use

1. Paste your HTML into the first box.
2. Paste your CSS styling into the second box.
3. Paste optional JavaScript into the third box.
4. Click View Preview to render it, or keep auto preview enabled.
5. Use Open In New Tab when you want a larger browser preview window.