CSS Formatter
Format and beautify CSS, SCSS and Less with configurable indentation, print width and quote style directly in your browser.
Format CSS, SCSS or Less
Beautify stylesheet code with consistent indentation, configurable line width and quote style.
Choose the parser that matches the source. SCSS and Less contain syntax that ordinary CSS does not understand.
Influences when Prettier wraps long selectors, values and expressions.
Language
CSS
Indentation
2 Spaces
Print Width
100
Quote Style
Double Quotes
Shortcut: Ctrl/Cmd + Enter to format
Stylesheet Overview
Quick structural indicators calculated from the stylesheet source.
Rules
—
Declarations
—
Selectors
—
Nesting Depth
—
Stylesheet Feature Statistics
Inspect common CSS constructs and references found in the source.
Comments
—
Custom Properties
—
var() Usage
—
!important
—
@media
—
@supports
—
@keyframes
—
@import
—
@font-face
—
URLs
—
Hex Colours
—
Stylesheet Size
Compare source code size with the formatted output.
Input
0
Lines
0
Characters
0
Bytes
Output
0
Lines
0
Characters
0
Bytes
CSS Formatting Example
Compact CSS
.card{display:flex;gap:1rem;padding:1.5rem;border:1px solid #e2e8f0;border-radius:1rem;background:#fff}
Formatted CSS
.card {
display: flex;
gap: 1rem;
padding: 1.5rem;
border: 1px solid #e2e8f0;
border-radius: 1rem;
background: #fff;
}
CSS, SCSS & Less
CSS
Standard stylesheet language interpreted directly by browsers.
:root {
--primary: #2563eb;
}
.button {
color: var(--primary);
}
SCSS
Sass syntax with variables, nesting, mixins and other preprocessing features.
$primary: #2563eb;
.button {
color: $primary;
&:hover {
opacity: 0.9;
}
}
Less
CSS preprocessor with variables, nesting, mixins and expressions.
@primary: #2563eb;
.button {
color: @primary;
&:hover {
opacity: 0.9;
}
}
CSS Custom Properties
Native CSS variables begin with two hyphens and are read using
var().
:root {
--color-primary: #2563eb;
--color-surface: #ffffff;
--radius-card: 1rem;
}
.card {
background: var(--color-surface);
border-radius: var(--radius-card);
}
.card__title {
color: var(--color-primary);
}
Media Queries
Media queries conditionally apply styles according to viewport or device characteristics.
.layout {
display: grid;
grid-template-columns: 1fr 1fr;
}
@media (max-width: 768px) {
.layout {
grid-template-columns: 1fr;
}
}
CSS Keyframes
@keyframes fade-in {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
Use !important Carefully
The
!important
flag raises the priority of a declaration within the CSS cascade.
It can solve specific override problems, but widespread use often makes styles harder to reason about and maintain.
The statistics section highlights how many
!important
declarations appear in the current source.
Formatting Is Not CSS Validation
Prettier understands stylesheet syntax well enough to format CSS, SCSS and Less, but this tool is not a complete CSS standards validator.
A stylesheet can format successfully while still containing unsupported browser features, selectors that match nothing, incorrect design behaviour or references to missing resources.
Choose the Correct Stylesheet Language
SCSS and Less extend normal CSS with additional syntax. A valid SCSS or Less stylesheet may therefore fail when parsed as ordinary CSS.
Select the parser that matches the source before formatting.
Formatting Is Different from Minification
This tool optimizes code for human readability rather than reducing production file size.
Production CSS minification, dead-code removal, bundling and asset optimization are separate build-stage concerns.
Private Browser-Based Stylesheet Formatting
CSS, SCSS and Less formatting happens directly inside your browser during normal interactive use.
- No stylesheet upload is required.
- Source code does not need to be sent to SwiftVecto's server.
- Formatting uses the installed Prettier PostCSS plugin locally.
- CSS statistics are calculated locally from the source text.
- Referenced URLs, fonts and assets are not requested by the formatter.
Continue with These Tools
Finished using CSS Formatter? Here are some related tools that people commonly use next to complete their workflow faster.
HTML Formatter
Format and beautify HTML with configurable indentation, print width and structured document statistics directly in your browser.
JavaScript Formatter
Format and beautify JavaScript, TypeScript, JSX and TSX with configurable indentation, quotes, semicolons and code style directly in your browser.
Laravel Blade Formatter
Format and beautify Laravel Blade templates with support for Blade directives, components, echo expressions and HTML directly in your browser.
HTML Encoder / Decoder
Encode HTML special characters into safe entities or decode HTML entities back into readable text. Work with named, decimal and hexadecimal entities directly in your browser.
Regex Tester
Test JavaScript regular expressions online with live match highlighting, capturing groups, named groups, flags and replacement previews directly in your browser.
How to Format CSS, SCSS and Less
Use the SwiftVecto CSS Formatter to turn compact or inconsistently formatted stylesheets into readable CSS, SCSS or Less. Choose the stylesheet language, indentation style, print width and quote preference, then copy the formatted result directly from your browser.
Overview
CSS controls the visual presentation of web pages, while SCSS and Less extend CSS with features such as variables, nesting, mixins and reusable expressions. Stylesheets often become difficult to inspect when declarations are compressed onto one line, indentation is inconsistent or deeply nested preprocessor syntax is involved. The SwiftVecto CSS Formatter uses Prettier in the browser with the appropriate parser for CSS, SCSS or Less. This allows the formatter to understand stylesheet structure rather than relying on simple whitespace replacement. The tool also calculates useful lexical statistics such as rule counts, declarations, selectors, custom properties, media queries, imports, URLs, keyframes, comments and !important usage.
Benefits
How It Works
Paste or type stylesheet code into the input editor.
Choose CSS, SCSS or Less as the stylesheet language.
Choose the preferred indentation style.
Choose the desired print width.
Choose single or double quotes where applicable.
Run Format Stylesheet.
The browser passes the source to Prettier using the parser that matches the selected language.
Prettier parses the stylesheet structure before creating consistently formatted output.
Basic stylesheet statistics are calculated separately from the formatting engine.
The resulting code can be copied directly.
How to Use This Tool
-
1Paste CSS, SCSS or Less into the input area.
-
2Choose the correct stylesheet language.
-
3Choose two spaces, four spaces or tabs.
-
4Set the preferred print width.
-
5Choose the preferred quote style.
-
6Run the formatter.
-
7Review the formatted stylesheet.
-
8Inspect stylesheet statistics if useful.
-
9Copy the formatted output.
-
10Use Load Sample to test the formatter quickly.
-
11Use Clear before starting another stylesheet.
Helpful Tips
- Choose CSS for ordinary .css files.
- Choose SCSS for .scss files containing Sass syntax.
- Choose Less for .less files.
- Formatting changes presentation rather than the intended stylesheet behaviour.
- A formatter is not a complete CSS standards validator.
- Use CSS custom properties when runtime variables are useful.
- SCSS variables use $ while Less variables commonly use @.
- Nested selectors should be reviewed carefully because nesting can change selector specificity and generated CSS.
- Avoid excessive use of !important because it can make styles harder to override.
- Media queries are easier to inspect when blocks are consistently indented.
- Long selectors may wrap according to the selected print width.
- Quote style can affect strings and URL-related presentation but should not alter intended values.
- Formatting does not check whether referenced images, fonts or URLs exist.
- Formatting does not determine whether selectors match real HTML elements.
- Formatting does not detect every browser compatibility issue.
- Formatting does not automatically improve stylesheet performance.
Common Uses
Format compact CSS copied from a stylesheet.
Beautify a long Tailwind component stylesheet.
Format SCSS nesting.
Format Sass variables written using SCSS syntax.
Format Less variables and mixins.
Format media queries.
Format CSS animations and keyframes.
Format CSS custom properties.
Inspect !important usage.
Inspect URL references in a stylesheet.
Format a responsive component stylesheet.
Format CSS copied from browser developer tools.
Worked Examples
The following examples demonstrate how this tool can be used in realistic scenarios.
Formatting Compact CSS
The compact source .card{padding:1rem;border:1px solid #ddd;background:#fff} can be expanded so each declaration appears on its own consistently indented line.
Formatting a Media Query
A compressed @media rule can be reformatted so the media condition, nested selectors and declarations are clearly separated.
Formatting SCSS Nesting
Nested SCSS selectors such as .card { &:hover { ... } } can be formatted while preserving the preprocessor nesting structure.
Formatting CSS Variables
Custom properties declared under :root can be reformatted into a clear list of variable declarations.
Formatting Keyframes
Animation keyframes can be formatted so each percentage step and its declarations are clearly structured.
Common Mistakes
Avoid these common mistakes to achieve the most accurate results.
- Using the CSS parser for SCSS syntax.
- Using the CSS parser for Less syntax.
- Assuming formatted CSS is automatically standards-compliant.
- Expecting the formatter to verify that selectors exist in an HTML document.
- Expecting the formatter to test browser compatibility.
- Expecting formatting to fix incorrect property values.
- Assuming formatting removes unused CSS.
- Confusing formatting with minification.
- Confusing formatting with CSS optimization.
- Using excessive !important declarations.
- Forgetting semicolons in syntax where they are required.
- Using SCSS variables in ordinary CSS.
- Using Less variables in ordinary CSS.
- Assuming nested preprocessor syntax is supported directly by every browser.
- Changing stylesheet code manually after formatting without reviewing the result.
Glossary
Definitions of the most important terms used by this tool.
CSS
Cascading Style Sheets, the language used to describe the visual presentation of HTML and other structured documents.
SCSS
A syntax of Sass that extends CSS with variables, nesting, mixins and other preprocessing features.
Less
A CSS preprocessor language that adds variables, nesting, mixins and other features to CSS.
Selector
A CSS expression identifying the elements to which a rule applies.
Declaration
A CSS property and value pair such as color: blue.
Declaration Block
A set of CSS declarations enclosed within braces.
Property
The CSS feature being configured, such as display, color or margin.
Value
The setting assigned to a CSS property.
At-Rule
A CSS instruction beginning with @, such as @media, @supports, @import or @keyframes.
Media Query
A conditional CSS rule used to apply styles according to viewport or device characteristics.
Custom Property
A CSS variable whose name begins with --, such as --primary-color.
Specificity
The CSS mechanism used to determine which competing selector rules take precedence.
!important
A CSS priority marker that raises the importance of a declaration within the cascade.
Preprocessor
A tool that transforms an extended stylesheet language such as SCSS or Less into ordinary CSS.
Prettier
An opinionated formatter that supports CSS, SCSS, Less and several other web development languages.
Frequently Asked Questions
What is a CSS formatter?
A CSS formatter parses stylesheet code and rewrites it with consistent indentation, whitespace and line breaks to improve readability.
Can this tool format SCSS?
Yes. Select SCSS before formatting source that uses Sass features such as $variables, nesting and mixins.
Can this tool format Less?
Yes. Less can be selected as the stylesheet language.
What is the difference between CSS and SCSS?
CSS is interpreted directly by browsers, while SCSS extends CSS with preprocessing features and must normally be compiled into CSS before deployment.
What is the difference between CSS and Less?
Less is a CSS preprocessor language that adds features such as variables, nesting and mixins before being compiled into ordinary CSS.
Does formatting change how my CSS works?
Formatting is intended to change presentation rather than stylesheet semantics. Important production styles should still be reviewed after formatting.
Does this tool validate CSS?
No. Prettier may reject certain malformed syntax, but the formatter should not be treated as a complete CSS standards validator.
Can this tool check whether a selector exists on my website?
No. The formatter works with stylesheet text and does not inspect the HTML or DOM of another website.
Can this tool detect unused CSS?
No. Unused CSS analysis requires knowledge of the HTML, templates, JavaScript and runtime states that may use the selectors.
Can this tool format media queries?
Yes. Media queries and their nested rules are formatted as part of the stylesheet.
Can this formatter handle CSS variables?
Yes. CSS custom properties such as --primary-color are ordinary stylesheet declarations and can be formatted normally.
Can this formatter handle @keyframes?
Yes. CSS animation keyframes can be formatted.
Can this formatter handle @supports?
Yes. Feature-query blocks can be formatted as part of CSS.
What print width should I use?
A value between about 80 and 120 characters is common. Print width is a formatter preference rather than a strict maximum.
Should CSS use two spaces or four spaces?
Either can work. Two spaces are common in frontend projects, but consistency within a codebase is more important than the specific width.
Can CSS use tabs?
Yes. Tabs can be used for indentation if that matches the project style.
What does !important mean?
!important raises the priority of a declaration within the CSS cascade. It can be useful in specific situations but excessive use often makes styles harder to maintain.
Does formatting make CSS load faster?
No. Pretty formatting usually adds whitespace. Production minification and optimization are separate concerns.
Does formatting improve website performance?
Formatting itself does not materially improve runtime performance. Performance depends on stylesheet size, selector usage, delivery strategy and browser rendering behaviour.
Can this tool format Tailwind CSS?
It can format ordinary CSS containing Tailwind-related directives where the selected parser supports the syntax, but Tailwind configuration and framework-specific processing are separate concerns.
Does SwiftVecto upload my stylesheet?
The interactive CSS Formatter is designed to format ordinary CSS, SCSS and Less directly inside your browser.
Is the CSS Formatter free?
Yes. SwiftVecto provides this developer utility for formatting CSS, SCSS and Less.
Things to Know
- The browser implementation uses the installed Prettier package.
- CSS, SCSS and Less use different Prettier parsers.
- The selected language should match the source syntax.
- Formatting is browser-first and does not require a server request.
- The tool is a formatter rather than a complete CSS standards validator.
- Print width is a formatting preference rather than a strict line-length limit.
- Quote style may be normalized according to formatter rules.
- Statistics are lexical indicators and are separate from the Prettier parser.
- Normal interactive processing is intended to happen directly inside the browser.
Disclaimer
Successful formatting does not guarantee standards-compliant CSS.
Formatting does not verify browser compatibility.
Formatting does not detect unused selectors.
Formatting does not verify that referenced URLs, fonts or assets exist.
SCSS and Less must generally be compiled before browsers can consume their extended syntax.
Users should review important production stylesheets after formatting.
Official References
The following official resources were used when developing this tool and are useful for further reading.