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.

Playground de CSS

Redefinir estilos

Meta viewport

HTML

CSS

Pré-visualização

Detalhes técnicos

Como o Playground de CSS Funciona

O Que a Ferramenta Faz

O Playground de CSS oferece dois editores — HTML e CSS — e uma prévia em iframe isolado que atualiza conforme você digita. Use-o para prototipar componentes, testar seletores, validar estilos de fallback ou criar repros mínimos para relatórios de bugs. O alternador 'Reset styles' adiciona um pequeno reset de CSS (box-sizing, padrões sensatos para o body) para que seu CSS não fique brigando com os padrões do navegador.

Casos de Uso Comuns para Desenvolvedores

Desenvolvedores frontend criam exemplos isolados de componentes para compartilhar em pull requests ou documentação. Designers experimentam com gradientes, sombras, tempos de animação e recursos modernos como grid, subgrid e container queries. Educadores demonstram conceitos de CSS para alunos sem precisar criar contas no CodePen. Engenheiros de QA reproduzem bugs somente de CSS de forma limpa em um ambiente controlado.

Formatos de Dados, Tipos ou Variantes

O editor de HTML aceita qualquer conteúdo do body. O editor de CSS aceita qualquer CSS moderno — propriedades personalizadas, nesting, @container, @layer etc. A saída é um documento HTML completo e independente com a tag meta viewport (opcional) e um bloco de style inline, pronto para copiar como um arquivo completo. O iframe de prévia usa sandbox='allow-same-origin' para permitir URLs relativas enquanto bloqueia scripts e envios de formulários.

Armadilhas Comuns e Casos de Borda

URLs externas em @font-face e instruções @import podem ser bloqueadas pelo sandbox do iframe. Colar CSS que depende de estilos herdados de um documento externo não vai se comportar da mesma forma aqui porque o iframe é isolado. Animações com durações muito longas continuam rodando no iframe de prévia mesmo quando o editor não está em foco; pause-as com animation-play-state se você estiver depurando temporização.

Quando Usar Esta Ferramenta vs Código

Use a ferramenta no navegador para experimentos pontuais, reproduções mínimas isoladas ou demos rápidas de ensino. Em um projeto real, seu servidor de desenvolvimento, hot module replacement e devtools de componentes (React Refresh, Vue devtools) oferecem um ciclo de feedback muito mais rico — use este playground para rascunhos para os quais você não quer configurar tooling.