Free online CSS editor with live preview. Write CSS against your HTML and see styles apply instantly in the browser — test selectors, flexbox, grid and animations, no setup.
About CSS
Free online CSS editor with live preview. Write CSS against your HTML and see styles apply instantly in the browser — test selectors, flexbox, grid and animations, no setup.
Features
CSS Editor
Live Preview
Tailwind Option
Flexbox & Grid
Instant Styling
Shareable Links
Browser playground limits
• Code runs in a sandboxed browser preview, without Node.js, a backend, or private environment variables.
• The Console prompt can inspect browser globals and the rendered DOM, but not variables scoped inside ES modules or component state.
• Download the project when you need build plugins, server APIs, native modules, or a production dependency workflow.
How to use the CSS playground
Edit the JavaScript, HTML and CSS tabs — the live preview updates automatically.
Switch the target or styling from the toolbar, then open the tabs you need.
Use the console for logs and errors, and Format to tidy the active tab.
Share the complete snippet or download it as a single HTML file.
Execution
Run code
Ctrl / ⌘+Enter
Save & run
Ctrl / ⌘+S
Editing
Undo
Ctrl / ⌘+Z
Redo
Ctrl / ⌘+Shift+Z
Select next occurrence
Ctrl / ⌘+D
Delete line
Ctrl / ⌘+Shift+K
Move line up / down
Alt+↑ / ↓
Copy line up / down
Alt+Shift+↑ / ↓
Toggle comment
Ctrl / ⌘+/
Indent line
Ctrl / ⌘+]
Outdent line
Ctrl / ⌘+[
Navigation
Find
Ctrl / ⌘+F
Find & replace
Ctrl / ⌘+H
Go to line
Ctrl / ⌘+G
Go to symbol
Ctrl / ⌘+Shift+O
Selection
Select all
Ctrl / ⌘+A
Select line
Ctrl / ⌘+L
Select all occurrences
Ctrl / ⌘+Shift+L
Terminal
Interrupt / kill process
Ctrl+C
Send EOF (close stdin)
Ctrl+D
Console shortcuts
Press Enter to evaluate, ↑ and ↓ to browse command history, and Ctrl/⌘ + L to clear the console.
JS
Frequently asked questions
Is the CSS playground free?
Yes. The CSS playground is completely free with no sign-up — write, run and share CSS code in your browser.
Do I need to install anything to run CSS online?
No. The live preview runs in your browser, and the single-file HTML export does not require a project setup.
Can I share or export my CSS code?
Yes. Share creates a link to your snippet. Download exports a single HTML file you can open in a browser.
Does the editor support autocomplete and live preview?
It does — a Monaco-powered editor with autocomplete and formatting, a live preview that updates as you type, and a console for logs and errors.