CSS Formatter
Make stylesheets easier to read with consistent spacing, indentation, and declaration layout.
Example output is ready. Edit either panel or paste your code to begin.
Local processing · Up to 200,000 input characters
Paste code here. Formatting never executes it.
/* MRHTML card layout example */
:root {
--accent: #3366ff;
}
.card,
.panel {
padding: 1rem 2rem;
color: var(--accent);
border: 1px solid #ddd;
}
@media (min-width: 768px) {
.card {
display: grid;
grid-template-columns: 1fr 2fr;
}
}
Output is editable. Copy and download use its current contents.
Format CSS without changing the cascade
The CSS formatter uses Prettier’s CSS parser to lay out selectors, declarations, functions, custom properties, and at-rules. It keeps rule order; formatting is not a minifier, autoprefixer, or property sorter.
How to beautify a stylesheet
-
Paste CSS, without HTML
<style>tags. - Choose indentation and your preferred line width.
-
Select Format CSS and copy the readable stylesheet or download a
.cssfile.
Try a responsive card
The example includes a custom color property, a shared selector, and a media query. The formatter puts declarations on separate lines and indents the nested rule so the responsive behavior is easier to inspect.
What does validation cover?
Structural parse errors are reported with a location when available. This does not check browser support or whether a property name or value is useful. Use the HTML formatter for complete documents. Input is limited to 200,000 characters; cancel a job at any time, and processing stops after ten seconds. Your CSS is not applied to this page.