What is the CSS Playground?

A live sandbox for experimenting with HTML and CSS together. Edit either pane, and the preview iframe updates instantly. Useful for trying out new CSS features, debugging selectors, or building isolated component examples.

Is the preview sandboxed?

Yes — the preview runs in an iframe with the sandbox attribute restricting scripts and network access. Your code never leaves the browser; nothing is uploaded.

Can I import external fonts or CSS?

External @import or URLs are blocked by the sandbox. Paste the relevant CSS directly into the editor, or use system fonts for previews.

CSS-speeltuin

Stijlen resetten

Viewport-meta

HTML

CSS

Voorbeeld

Technische details

Hoe de CSS Playground werkt

Wat de tool doet

De CSS Playground geeft je twee editors — HTML en CSS — en een gesandboxte iframe-preview die bijwerkt terwijl je typt. Gebruik het om componenten te prototypen, selectors te testen, fallback-stijlen te valideren of minimale repro's te maken voor bugreports. De schakelaar 'Reset styles' voegt een kleine CSS reset toe (box-sizing, verstandige body-standaarden) zodat je CSS niet hoeft te vechten tegen browser-standaarden.

Veelvoorkomende use-cases voor ontwikkelaars

Frontend developers bouwen geïsoleerde componentvoorbeelden om te delen in pull requests of documentatie. Designers experimenteren met gradients, schaduwen, animatietimings en moderne features zoals grid, subgrid en container queries. Docenten demonstreren CSS-concepten aan studenten zonder CodePen-accounts op te zetten. QA-engineers reproduceren CSS-only bugs netjes in een gecontroleerde omgeving.

Gegevensformaten, typen of varianten

De HTML-editor accepteert elke body-inhoud. De CSS-editor accepteert elke moderne CSS — custom properties, nesting, @container, @layer, enz. De output is een volledig zelfstandig HTML-document met de meta viewport-tag (optioneel) en een inline style-block, klaar om te kopiëren als compleet bestand. De preview-iframe gebruikt sandbox='allow-same-origin' om relatieve URL's toe te staan terwijl scripts en formulierinzendingen worden geblokkeerd.

Veelvoorkomende valkuilen en edge-cases

Externe @font-face-URL's en @import-statements kunnen door de iframe-sandbox worden geblokkeerd. CSS plakken die afhankelijk is van geërfde stijlen uit een buitenliggend document gedraagt zich hier niet hetzelfde omdat de iframe geïsoleerd is. Animaties met zeer lange duur blijven draaien in de preview-iframe, zelfs wanneer de editor geen focus heeft; pauzeer ze met animation-play-state als je timing debugt.

Wanneer je deze tool gebruikt vs code

Gebruik de browsertool voor eenmalige experimenten, geïsoleerde minimale reproducties of snelle lesdemo's. In een echt project geven je devserver, hot module replacement en component-devtools (React Refresh, Vue devtools) je een veel rijkere feedbackloop — gebruik deze playground voor schetsen waarvoor je geen tooling wilt opzetten.