<!DOCTYPE html>
<html lang="en">







<head>
	<title>Free Online CSS Beautifier / Formatter - FreeFormatter.com</title>
	<meta name="title" content="Free Online CSS Beautifier / Formatter - FreeFormatter.com"/>
	<meta name="description" content="This free online tool lets you beautify/format your CSS code with no side effects"/>	  		
		<meta name="language" content="en"/>
	<meta name="robots" content="all"/>
	<meta name="rating" content="general"/>	
	<meta charset="utf-8"/>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<link rel="shortcut icon" href="favicon.ico"/>
	<link rel="stylesheet" href="/3.7.0.0/css/styles.css"/>
	<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/cupertino/jquery-ui.css"/>

	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

	<script src="/3.7.0.0/js/freeformatter.js"></script>

	<script type="text/javascript">
		!function(){var i,r,o;i="__tcfapiLocator",r=[],(o=window.frames[i])||(function e(){var t=window.document,a=!!o;if(!a)if(t.body){var n=t.createElement("iframe");n.style.cssText="display:none",n.name=i,t.body.appendChild(n)}else setTimeout(e,5);return!a}(),window.__tcfapi=function(){for(var e,t=[],a=0;a<arguments.length;a++)t[a]=arguments[a];if(!t.length)return r;if("setGdprApplies"===t[0])3<t.length&&2===parseInt(t[1],10)&&"boolean"==typeof t[3]&&(e=t[3],"function"==typeof t[2]&&t[2]("set",!0));else if("ping"===t[0]){var n={gdprApplies:e,cmpLoaded:!1,cmpStatus:"stubCMP",apiVersion:2};"function"==typeof t[2]&&t[2](n,!0)}else r.push(t)},window.addEventListener("message",function(n){var i="string"==typeof n.data,e={};try{e=i?JSON.parse(n.data):n.data}catch(e){}var r=e.__tcfapiCall;r&&window.__tcfapi(r.command,r.version,function(e,t){var a={__tcfapiReturn:{returnValue:e,success:t,callId:r.callId}};i&&(a=JSON.stringify(a)),n.source.postMessage(a,"*")},r.parameter)},!1))}();
		!function(){var i,n,s;i="__uspapiLocator",n=[],(s=window.frames[i])||(function a(){var e=window.document,n=!!s;if(!s)if(e.body){var t=e.createElement("iframe");t.style.cssText="display:none",t.name=i,e.body.appendChild(t)}else setTimeout(a,5);return!n}(),window.__uspapi=function(){for(var a=[],e=0;e<arguments.length;e++)a[e]=arguments[e];if(!a.length)return n;"ping"===a[0]?"function"==typeof a[2]&&a[2]({cmpLoaded:!1,cmpStatus:"stubCMP"},!0):n.push(a)},window.addEventListener("message",function(t){var i="string"==typeof t.data,a={};try{a=i?JSON.parse(t.data):t.data}catch(a){}var s=a.__uspapiCall;s&&window.__uspapi(s.command,s.version,function(a,e){var n={__uspapiReturn:{returnValue:a,success:e,callId:s.callId}};i&&(n=JSON.stringify(n)),t.source.postMessage(n,"*")},s.parameter)},!1))}();
	</script>
	<script async src='https://cmp.uniconsent.com/v2/5a6357a030/cmp.js'></script>

	<script type="text/javascript">
		window.googletag = window.googletag || {};
		window.googletag.cmd = window.googletag.cmd || [];
		window.googletag.cmd.push(function() {
			window.googletag.pubads().enableAsyncRendering();
			window.googletag.pubads().disableInitialLoad();
		});
		(adsbygoogle=window.adsbygoogle||[]).pauseAdRequests=1;

		__tcfapi("addEventListener", 2, function(tcData, success) {
			if (success && tcData.unicLoad  === true) {
				if(!window._initAds) {
					window._initAds = true;
					var script = document.createElement('script');
					script.async = true;
					script.setAttribute('data-ad-client', 'ca-pub-2485708030241382');
					script.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
					document.head.appendChild(script);
				}
			}
		});
	</script>
	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/styles/vs.min.css">
	<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/highlight.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/languages/css.min.js"></script>	
	<script>hljs.initHighlightingOnLoad();</script>		
	<script type="text/javascript">
		
		$(function() {

			$('#selectAll').click(FF.selectOutput);
			new Clipboard('#copyToClipboard');
			
		});
		
		var FF =  {
				
			submit: function(usenewwindow) {
				
				if (!_assertFileSize('#cssFile')) {
					return false;
				}

				$('#forceInNewWindow').val(usenewwindow);
				
				if (usenewwindow) {
					$('#form').attr('target', '_blank');
				} else {
					$('#form').attr('target', '_self');
				}
				
				$('#form').trigger('submit');
				
			}, selectOutput: function() {
				
				var text = $('#cssOutput')[0];
				
				if ($.browser.msie) {
					var range = document.body.createTextRange();
					range.moveToElementText(text);
					range.select();
				} else {
					var selection = window.getSelection();
					var range = document.createRange();
					range.selectNodeContents(text);
					selection.removeAllRanges();
					selection.addRange(range);
				}
				
			}
			
		}
		
	</script>
</head>
<body>
	<div class="topbar">
	<div class="topbar-inner">
		<div class="container-fluid">
			<a class="brand" href="http://www.freeformatter.com">FreeFormatter.com</a>
			<ul class="nav">
				<li><a href="mailto:freeformatter@gmail.com">Contact</a></li>
			</ul>
			<div class="social" style="float:right;">
				<div class="fb-like" data-href="http://www.freeformatter.com" data-send="false" data-layout="button_count" data-width="50" data-show-faces="true" data-font="arial"></div>
			</div>
		</div>
	</div>
</div>
	<div class="container-fluid">
		<div class="sidebar">
	<div class="well">
		<div>
			<input type="text" class="search-tools" placeholder="Search tools...">
		</div>
		<a href="/formatters.html"><h5>Formatters</h5></a>
		<ul>
			<li><a href="/json-formatter.html">JSON Formatter</a></li>
			<li><a href="/html-formatter.html">HTML Formatter</a></li>
			<li><a href="/xml-formatter.html">XML Formatter</a></li>
			<li><a href="/sql-formatter.html">SQL Formatter</a></li>
		</ul>
		<a href="/validators.html"><h5>Validators</h5></a>
		<ul>		
			<li><a href="/json-validator.html">JSON Validator</a></li>
			<li><a href="/html-validator.html">HTML Validator</a></li>
			<li><a href="/xml-validator-xsd.html">XML Validator - XSD</a></li>
			<li><a href="/xpath-tester.html">XPath Tester</a></li>
			<li><a href="/credit-card-number-generator-validator.html">Credit Card Number Generator & Validator</a></li>
			<li><a href="/regex-tester.html">Regular Expression Tester (RegEx)</a></li>
			<li><a href="/java-regex-tester.html">Java Regular Expression Tester (RegEx)</a></li>
			<li><a href="/cron-expression-generator-quartz.html">Cron Expression Generator - Quartz</a></li>						
		</ul>
		<a href="/encoders.html"><h5>Encoders & Decoders</h5></a>
		<ul>
			<li><a href="/url-encoder.html">Url Encoder & Decoder</a></li>
			<li><a href="/base64-encoder.html">Base 64 Encoder & Decoder</a></li>
			<li><a href="/convert-file-encoding.html">Convert File Encoding</a></li>
			<li><a href="/qr-code-generator.html">QR Code Generator</a></li>
		</ul>
		<a href="/minifiers.html"><h5>Code Minifiers / Beautifier</h5></a>
		<ul>
			<li><a href="/javascript-beautifier.html">JavaScript Beautifier</a></li>
			<li><a href="/css-beautifier.html">CSS Beautifier</a></li>
			<li><a href="/javascript-minifier.html">JavaScript Minifier</a></li>
			<li><a href="/css-minifier.html">CSS Minifier</a></li>
		</ul>
		<a href="/converters.html"><h5>Converters</h5></a>
		<ul>
			<li><a href="/xsd-generator.html">XSD Generator</a></li>
			<li><a href="/xsl-transformer.html">XSLT (XSL Transformer)</a></li>					
			<li><a href="/xml-to-json-converter.html">XML to JSON Converter</a></li>
			<li><a href="/json-to-xml-converter.html">JSON to XML Converter</a></li>
			<li><a href="/csv-to-xml-converter.html">CSV to XML Converter</a></li>	
			<li><a href="/csv-to-json-converter.html">CSV to JSON Converter</a></li>			
			<li><a href="/epoch-timestamp-to-date-converter.html">Epoch Timestamp To Date</a></li>
		</ul>
		<a href="/cryptography-and-security.html"><h5>Cryptography & Security</h5></a>
		<ul>
			<li><a href="/message-digest.html">Message Digester (MD5, SHA-256, SHA-512)</a></li>
			<li><a href="/hmac-generator.html">HMAC Generator</a></li>			
			<li><a href="/md5-generator.html">MD5 Generator</a></li>
			<li><a href="/sha256-generator.html">SHA-256 Generator</a></li>
			<li><a href="/sha512-generator.html">SHA-512 Generator</a></li>			
		</ul>
		<a href="/string-escaper.html"><h5>String Escaper & Utilities</h5></a>
		<ul>
			<li><a href="/string-utilities.html">String Utilities</a></li>
			<li><a href="/html-escape.html">HTML Escape</a></li>
			<li><a href="/xml-escape.html">XML Escape</a></li>
			<li><a href="/java-dotnet-escape.html">Java and .Net Escape</a></li>
			<li><a href="/javascript-escape.html">JavaScript Escape</a></li>
			<li><a href="/json-escape.html">JSON Escape</a></li>			
			<li><a href="/csv-escape.html">CSV Escape</a></li>
			<li><a href="/sql-escape.html">SQL	Escape</a></li>
		</ul>
		<a href="/web-resources.html"><h5>Web Resources</h5></a>
		<ul>
			<li><a href="/lorem-ipsum-generator.html">Lorem Ipsum Generator</a></li>
			
			<li><a href="/mime-types-list.html">List of MIME types</a></li>
			<li><a href="/html-entities.html">HTML Entities</a></li>
			<li><a href="/url-parser-query-string-splitter.html">Url Parser / Query String Splitter</a></li>
			<li><a href="/i18n-standards-code-snippets.html">i18n - Formatting standards & code snippets</a></li>
			<li><a href="/iso-country-list-html-select.html">ISO country list - HTML select snippet</a></li>
			<li><a href="/usa-state-list-html-select.html">USA state list - HTML select snippet</a></li>
			<li><a href="/canada-province-list-html-select.html">Canada province	list - HTML select snippet</a></li>
			<li><a href="/mexico-state-list-html-select.html">Mexico state list - HTML select snippet</a></li>
			<li><a href="/time-zone-list-html-select.html">Time zone list - HTML select snippet</a></li>
		</ul>
	</div>
	<div style="text-align: center;">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- freeformatter-responsive -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-2485708030241382"
     data-ad-slot="9677864628"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
	</div>
</div>
		<div class="content">
			<div class="content-inner">
				<h1>CSS Beautifier</h1>
				<p>
					Formats a CSS files with the chosen indentation level for optimal readability. Supports 4 indentation levels: 2 spaces, 3 spaces, 4 spaces and tabs.
				</p>
				<p>
					<strong>*The maximum size limit for file upload is 2 megabytes. All files bigger than 500k will be formatted to a new window for performance reason and to prevent your browser from being unresponsive.</strong>
				</p>
				<div id="notifications">
	
	
	
	
	
	
	
	
</div>				
				<div class="form-wrapper">
					<form id="form" action="https://www.freeformatter.com/css-beautifier.html" method="POST" enctype="multipart/form-data">
						
						<input id="forceInNewWindow" name="forceInNewWindow" type="hidden" value="false"/>
						
						<div class="title first"><span class="option">Option 1:</span> <span class="option-text">Copy-paste your CSS string here</span></div>
						<textarea id="cssString" name="cssString">
</textarea>
						
						<div class="title"><span class="option">Option 2:</span> <span class="option-text">Or upload your CSS file</span></div>
						<input type="file" id="cssFile" name="cssFile" style="width:60%;display:inline;"/>
						<select id="encoding" name="encoding" style="width:30%;display:inline;">
							<option value="ISO-8859-1">ISO-8859-1 (Latin Alphabet No. 1)</option>
							<option value="ISO-8859-2">ISO-8859-2 (Latin Alphabet No. 2)</option>
							<option value="ISO-8859-3">ISO-8859-3 (Latin Alphabet No. 3)</option>
							<option value="ISO-8859-4">ISO-8859-4 (Latin Alphabet No. 4)</option>
							<option value="ISO-8859-5">ISO-8859-5 (Latin/Cyrillic Alphabet)</option>
							<option value="ISO-8859-6">ISO-8859-6 (Latin/Arabic Alphabet)</option>
							<option value="ISO-8859-7">ISO-8859-7 (Latin/Greek Alphabet)</option>
							<option value="ISO-8859-8">ISO-8859-8 (Latin/Hebrew Alphabet)</option>
							<option value="ISO-8859-9">ISO-8859-9 (Latin Alphabet No. 5)</option>
							<option value="ISO-8859-13">ISO-8859-13 (Latin Alphabet No. 7)</option>
							<option value="ISO-8859-15">ISO-8859-15 (Latin Alphabet No. 9)</option>
							<option value="UTF-8" selected="selected">UTF-8</option>
							<option value="UTF-16">UTF-16</option>
							<option value="UTF-16BE">UTF-16 (Big-Endian)</option>
							<option value="UTF-16LE">UTF-16 (Little-Endian)</option>
							<option value="UTF-32">UTF-32</option>
							<option value="UTF-32BE">UTF-32 (Big-Endian)</option>
							<option value="UTF-32LE">UTF-32 (Little-Endian)</option>
							<option value="US-ASCII">US-ASCII</option>
							<option value="windows-1250">windows-1250 (Windows Eastern European)</option>
							<option value="windows-1251">windows-1251 (Windows Cyrillic)</option>
							<option value="windows-1252">windows-1252 (Windows Latin-1)</option>
							<option value="windows-1253">windows-1253 (Windows Greek)</option>
							<option value="windows-1254">windows-1254 (Windows Turkish)</option>
							<option value="windows-1255">windows-1255 (Windows Hebrew)</option>
							<option value="windows-1256">windows-1256 (Windows Arabic)</option>
							<option value="windows-1257">windows-1257 (Windows Baltic)</option>
							<option value="windows-1258">windows-1257 (Windows Vietnamese)</option>
						</select>
												
						<div class="title"><span class="option">Indentation level:</span></div>
						<select id="indentation" name="indentation">
							<option value="TWO_SPACES">2 spaces per indent level</option>
							<option value="THREE_SPACES">3 spaces per indent level</option>
							<option value="FOUR_SPACES">4 spaces per indent level</option>
							<option value="TABS" selected="selected">Tab delimited</option>
						</select>

						<div class="buttons">
							<button class="btn primary" title="Beautify CSS file" onclick="FF.submit(false);return false;">BEAUTIFY CSS</button>
							<button class="btn primary" title="Beautify CSS file in new window" onclick="FF.submit(true);return false;">BEAUTIFY CSS IN NEW WINDOW</button>
						</div>
						
					<div>
</div></form>				
				</div>	
				
				<div id="ad-output" class="ad-wrapper">
					<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- freeformatter-responsive -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-2485708030241382"
     data-ad-slot="9677864628"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
				</div>
				
				
				
			</div>
			<footer>
	<p>&copy; FreeFormatter.com - FREEFORMATTER is a d/b/a of 10174785 Canada Inc. - <a href="/copyright-notice.html">Copyright Notice</a> - <a href="/privacy-statement.html">Privacy Statement</a> - <a href="/terms-of-use.html">Terms of Use</a></p>
</footer>	
		</div>
	</div>
	<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-24060392-1']);
  _gaq.push(['_trackPageview']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
<div id="fb-root"></div>
<script>
	(
		function() {
    		var e = document.createElement('script'); e.async = true;
    		e.setAttribute('defer', 'defer');
    		e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js#xfbml=1';    		
    		document.getElementById('fb-root').appendChild(e);
 		}()
 	);
</script>
</body>
</html>