All tools

CSS playground

Try CSS on a page as you type it, flexbox, grid and animations, with SCSS too, on your device. Free, with no account or uploads.

Try CSS live

Change the CSS and the page follows as you type. Choose SCSS in the CSS editor's title to write Sass, turned into CSS on your device. Open an HTML file, its stylesheets and scripts, or a zip of them, by choosing them or dropping them here.

Start with
Start with a gridCSS Grid galleryA web pageReady to changeA blank pageNothing in itA React appJSX and React

Your code runs on this device and is never uploaded. The project is kept in this browser only if you turn that on.

How it works and help

A little help along the way

Follow these steps. Every option is explained underneath, and nothing you write leaves your device.

  1. Open the playgroundChoose what to start with: A web page, a small page that shows each part at work; A blank page, to start from nothing; or A React app or a Tailwind design. Then press Start coding. Every other starter (a grid, a form, a canvas and more) is under More options. The playground opens in its own window, as large as the screen.
  2. WriteThe HTML goes in the page's body, the CSS styles it and the JavaScript runs after both. The editors suggest tags, properties and names as you type, close brackets and tags, fold blocks and find and replace (Ctrl or ⌘ + F). Write a whole document, with <html> and <head>, in the HTML editor and it is kept as it is.
  3. Watch the pageThe result runs again a moment after you stop typing. Press Run (Ctrl or ⌘ + Enter) to run it at any time, for example after turning off Run as I type. Show it as wide as a phone, a tablet or a laptop, or open it in a window of its own.
  4. Read the consoleWhat the page writes with console.log, console.table and the rest shows under the result, with errors and the line they came from: press script.js:12 to go to that line. Objects and arrays open to show what they hold. Filter by errors, warnings or logs.
  5. Try things in the consoleType JavaScript into the line at the bottom of the console and press Enter: it runs in the page, and its answer is shown. Up and down bring back what you typed before.
  6. Arrange the windowDrag the lines between the parts, or focus one and use the arrow keys. In Settings, put the editors on the left, on top or on the right; fold an editor away with its minus button. On a phone, each part has a tab.
  7. Choose a languageEach editor's title is a menu: write Markdown instead of HTML, SCSS instead of CSS, or TypeScript, JSX or TSX instead of JavaScript. They are turned into HTML, CSS and JavaScript on your device before the page runs, and a line that cannot be is marked and named in the console.
  8. Use packages and TailwindImport a package by its name, such as import confetti from "canvas-confetti", and the page fetches it from esm.sh; JSX brings React the same way. Turn on Tailwind CSS in Settings to style with its classes and @apply.
  9. Tidy and type lessThe wand in an editor's title tidies its code with Prettier; Shift + Alt + F tidies all three, and Ctrl or ⌘ + Z puts it back. In HTML and CSS, type an Emmet abbreviation such as ul>li*3 and press Tab.
  10. Open your own filesPress Open files (under More options on the start), or drop them on the start or the window: an HTML page with its stylesheets and scripts, a few code files, or a zip of them. The page's own <style> and <script> go into the CSS and JavaScript editors, and links to the files you opened with it are taken out.
  11. Add libraries and fontsIn the menu, Head and outside files takes the address of a stylesheet or script on another site, such as a CDN, and writes it into the page before your code. Anything else for the page's <head>, such as a font's link or an import map, goes in the head editor below.
  12. Save it or share itSave writes one HTML file with your CSS and JavaScript inside, to open in any browser; the menu also saves a zip of index.html, style.css and script.js. Share as a link puts the whole project in the link itself. Turn on Keep this project on this device in Settings to find it again in the list when you come back.

Questions people ask

Can I write SCSS?
Yes. Choose SCSS in the CSS editor's title and write Sass: variables, nesting, mixins and loops, turned into CSS on your device by Sass itself. A mistake is named with its line.
Can I see how my CSS looks on a phone?
Yes. Show the page as wide as a phone (375 pixels), a tablet or a laptop with the buttons above it, and your media queries apply as they would on that screen.
Can I use a font or a stylesheet from a CDN?
Yes. In the menu, Head and outside files takes a stylesheet's address, or a font's link in the head. The page fetches it from that site when it runs.

This page is the Code playground, opened for this one job; every other tool it has is one press away. Each of its settings is explained on the Code playground's own page.

Read the step-by-step guide

Guides

Same tool, other jobs

Tools nearby