CSS3 Stylesheet Beautifier, Minifier & Syntax Validator

CSS Formatter

Beautify, format, validate, and minify CSS code with consistent indentation, custom property preservation, at-rule inspection, and safe sandboxed render preview.

Load Preset Template:

Indent Size:

Indent Type:

Line Wrap (Print Width):

Quote Style:

Input CSS Code

0 chars

0 chars

CSS Structure Valid: No syntax errors detected.

Valid CSS

Lines:0|Input Chars:0|Output Chars:0|CSS Rules:0|Declarations:0|At-Rules (@media):0|CSS Variables:0|Comments:0

CSS3 Formatting Standards & Developer Reference

Custom Variables (:root)

Custom CSS variables (--primary-color: #0d6efd;) and function calls (var(--primary-color)) are preserved without altering custom property tokens.

Media & Container Queries

Nested at-rules (@media, @keyframes, @container, @layer, @supports) are formatted with clear indentation hierarchies.

Preview Sandbox Isolation

The render preview styles a sample UI card inside an isolated <iframe sandbox="allow-forms">, preventing user CSS from leaking into or altering the main application DOM.

String & Unicode Safety

CSS strings containing braces (content: "{hello}"), data URLs, pseudo-element content, and unicode characters remain preserved.

`; } // Calculate Rules, Declarations, At-Rules, Variables, Comments const rulesMatch = inputCode.match(/[^{}\s][^{}]*\{/g); const rulesCount = rulesMatch ? rulesMatch.length : 0; const declarationsMatch = inputCode.match(/[\w-]+\s*:\s*[^;{}]+;/g); const declarationsCount = declarationsMatch ? declarationsMatch.length : 0; const atRulesMatch = inputCode.match(/@(media|keyframes|container|layer|supports|import|font-face)/gi); const atRulesCount = atRulesMatch ? atRulesMatch.length : 0; const varsMatch = inputCode.match(/--[\w-]+\s*:/g); const varsCount = varsMatch ? varsMatch.length : 0; const commentsMatch = inputCode.match(/\/\*[\s\S]*?\*\//g); const commentsCount = commentsMatch ? commentsMatch.length : 0; document.getElementById('statRules').innerText = rulesCount; document.getElementById('statDeclarations').innerText = declarationsCount; document.getElementById('statAtRules').innerText = atRulesCount; document.getElementById('statVars').innerText = varsCount; document.getElementById('statComments').innerText = commentsCount; // Validate CSS Syntax validateCssSyntax(inputCode); } function validateCssSyntax(code) { const alertBox = document.getElementById('cssValAlert'); const alertTitle = document.getElementById('cssValTitle'); const alertMsg = document.getElementById('cssValMsg'); const alertBadge = document.getElementById('cssValBadge'); if (!code || code.trim() === '') { alertBox.className = 'alert alert-secondary border-0 py-2 px-3 font13px mb-2 d-flex align-items-center justify-content-between'; alertTitle.innerText = 'Editor Empty'; alertMsg.innerText = 'Enter CSS code to validate.'; alertBadge.className = 'badge bg-secondary font11px'; alertBadge.innerText = 'Empty'; return; } let openBraces = 0; let inComment = false; let lines = code.split('\n'); for (let l = 0; l < lines.length; l++) { let line = lines[l]; for (let c = 0; c < line.length; c++) { let ch = line[c]; let next = line[c + 1]; if (!inComment && ch === '/' && next === '*') { inComment = true; c++; continue; } if (inComment && ch === '*' && next === '/') { inComment = false; c++; continue; } if (inComment) continue; if (ch === '{') openBraces++; if (ch === '}') { openBraces--; if (openBraces < 0) { alertBox.className = 'alert alert-danger border-0 py-2 px-3 font13px mb-2 d-flex align-items-center justify-content-between'; alertTitle.innerText = 'CSS Syntax Error'; alertMsg.innerText = `Unexpected closing brace '}' at Line ${l + 1}, Column ${c + 1}.`; alertBadge.className = 'badge bg-danger font11px'; alertBadge.innerText = 'Syntax Error'; return; } } } } if (inComment) { alertBox.className = 'alert alert-warning border-0 py-2 px-3 font13px mb-2 d-flex align-items-center justify-content-between'; alertTitle.innerText = 'CSS Warning'; alertMsg.innerText = 'Unclosed comment block (/* ...) detected.'; alertBadge.className = 'badge bg-warning text-dark font11px'; alertBadge.innerText = 'Warning'; return; } if (openBraces > 0) { alertBox.className = 'alert alert-danger border-0 py-2 px-3 font13px mb-2 d-flex align-items-center justify-content-between'; alertTitle.innerText = 'CSS Syntax Error'; alertMsg.innerText = `Missing ${openBraces} closing brace(s) '}'.`; alertBadge.className = 'badge bg-danger font11px'; alertBadge.innerText = 'Syntax Error'; return; } // Valid CSS alertBox.className = 'alert alert-success border-0 py-2 px-3 font13px mb-2 d-flex align-items-center justify-content-between'; alertTitle.innerText = 'CSS Structure Valid'; alertMsg.innerText = 'CSS stylesheet syntax and brace hierarchy are valid.'; alertBadge.className = 'badge bg-success font11px'; alertBadge.innerText = 'Valid CSS'; }

Ojoo is a low-code/no-code platform to build apps, automate workflows, and manage business operations — all in one place.

Follow Us

Need assistance or custom enterprise solutions?

Contact Support