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-Spielwiese

Stile zurücksetzen

Viewport-Meta

HTML

CSS

Vorschau

Technische Details

So funktioniert der CSS Playground

Was das Tool macht

Der CSS Playground bietet Ihnen zwei Editoren — HTML und CSS — sowie eine sandboxed iframe-Vorschau, die sich beim Tippen aktualisiert. Nutzen Sie ihn, um Komponenten zu prototypisieren, Selektoren zu testen, Fallback-Styles zu validieren oder minimale Repros für Bug-Reports zu erstellen. Der Schalter „Reset styles“ fügt ein kleines CSS-Reset hinzu (box-sizing, sinnvolle body-Defaults), damit Ihr CSS nicht gegen Browser-Defaults ankämpfen muss.

Häufige Anwendungsfälle für Entwickler

Frontend-Entwickler erstellen isolierte Komponentenbeispiele zum Teilen in Pull Requests oder in der Dokumentation. Designer experimentieren mit Verläufen, Schatten, Animations-Timings und modernen Features wie Grid, Subgrid und Container Queries. Lehrende demonstrieren CSS-Konzepte für Studierende, ohne CodePen-Accounts einzurichten. QA-Ingenieure reproduzieren CSS-only-Bugs sauber in einer kontrollierten Umgebung.

Datenformate, Typen oder Varianten

Der HTML-Editor akzeptiert beliebigen Body-Inhalt. Der CSS-Editor akzeptiert modernes CSS — Custom Properties, Nesting, @container, @layer usw. Die Ausgabe ist ein vollständiges, eigenständiges HTML-Dokument mit dem Meta-Viewport-Tag (optional) und einem inline style-Block, bereit zum Kopieren als komplette Datei. Das Vorschau-iframe verwendet sandbox='allow-same-origin', um relative URLs zu erlauben, während Skripte und Formularübermittlungen blockiert werden.

Häufige Fallstricke und Sonderfälle

Externe @font-face-URLs und @import-Anweisungen können durch die iframe-Sandbox blockiert werden. Eingefügtes CSS, das von geerbten Styles eines äußeren Dokuments abhängt, verhält sich hier nicht gleich, weil das iframe isoliert ist. Animationen mit sehr langen Laufzeiten laufen in der Vorschau weiter, auch wenn der Editor nicht fokussiert ist; pausieren Sie sie beim Debuggen von Timing mit animation-play-state.

Wann dieses Tool statt Code verwenden

Verwenden Sie das Browser-Tool für einmalige Experimente, isolierte minimale Reproduktionen oder schnelle Teaching-Demos. In einem echten Projekt liefern Ihnen Dev-Server, Hot Module Replacement und Component-Devtools (React Refresh, Vue devtools) eine deutlich reichhaltigere Feedback-Schleife — nutzen Sie diesen Playground für Skizzen, für die Sie kein Tooling aufsetzen möchten.