Developer Sandbox

Write front-end code, see it run, check it against real tests.

Everything on this page runs in your browser. Nothing is uploaded, no account is needed, and your progress is stored locally on this device.

Glassmorphism Card

Build a frosted-glass card: a translucent background with a blur behind it, generously rounded corners, and a button that reacts to hover.

•Blur what is behind the card with backdrop-filter
•Give the card a semi-transparent background (alpha below 1)
•Round the corners by at least 16px
•Include a <button> whose appearance transitions

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
  body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-items: center;
    font-family: system-ui, sans-serif;
    color: #fff;
    /* Something colourful behind the card, so the blur is visible. */
    background: linear-gradient(135deg, #ff4704, #7b2ff7 60%, #1b1b3a);
  }

.card {
    /* TODO: make this translucent, blur what is behind it,
       and round the corners by at least 16px. */
    background: #1b1b3a;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 32px;
    max-width: 340px;
    text-align: center;
  }

h1 { margin: 0 0 8px; font-size: 22px; }
  p  { margin: 0 0 20px; font-size: 14px; opacity: .85; line-height: 1.6; }

.btn {
    /* TODO: add a transition so the hover state animates. */
    padding: 10px 22px;
    border: none;
    border-radius: 999px;
    background: #fff;
    color: #1b1b3a;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
  }

.btn:hover { background: #ffd9c9; }
</style>
</head>
<body>
  <div class="card">
    <h1>Frosted glass</h1>
    <p>Make this card translucent and blur the gradient behind it.</p>
    <button class="btn">Get started</button>
  </div>
</body>
</html>

Live preview

Tests

4 checks — run them when you're ready

Each check inspects the document your code produces — the elements, the stylesheet and the script — rather than searching the text for keywords.

Write front-end code, see it run, check it against real tests.

Glassmorphism Card

Accessible Accordion

Theme Switcher

Glassmorphism Card

Tests