CSS Transformation Playground
Flatten nested CSS, add browser prefixes, and remove comments with a before-and-after view and downloadable CSS.
How can I transform CSS without changing my website?
Paste CSS, choose the changes you want, and select Transform CSS. Compare the original with the result before downloading it. You can flatten Sass-style nesting, add browser prefixes, or remove ordinary comments.
Your result
A little clarity, right here.
Start with your own content or load the example. Your result will appear here.
Three simple steps
How to use CSS Transformation Playground
Paste your source or open a text file. Try the example if you are learning.
Choose the options and run the tool. Your source stays on this device.
Review the result, then copy it or download the files.
Common questions
Good to know
Understand the result.
Keep the original.
Is this tool free, and are my files uploaded?
This tool is free with no account required. The work happens in your browser. Your input and files are not sent to a processing server.
What are the limits and details?
Up to 100,000 UTF-8 bytes, 5,000 CSS statements and 40 nesting levels. Processing stops after 30 seconds. Files stay on your device. CSS is never applied to this page and JavaScript is never executed. Uses PostCSS Nested syntax, not the native CSS nesting specification. Only the listed plugins run. Imports and URLs are not fetched. Comments beginning with ! are kept.
100 KB of source. Local processing. Cancel at any time.