Open any .css file online with color-coded code, folding and search, then beautify or minify it and see exactly how many bytes you save. Check selector specificity, grab the color palette, catch errors and preview the styles live - and when you need the markup or scripts too, the HTML File Viewer and JS File Viewer are one click away.
Something went wrong. Please try again.
Still having trouble? Please contact us and we'll be happy to help!
or paste CSS
Ctrl + Enter to view · Ctrl + V anywhere
Try a sample
Recent files
Beautify & minify Color palette Live preview No upload
ReadIndex linesDraw
Reading file...0%
styles.css
13px
Aggressive also merges and moves rules (CSSO restructuring). It saves more bytes, but test the result if your CSS relies on rule order.
Open your stylesheet. Drop a .css, .scss or .less file anywhere on the page, browse for it, paste the code, or try a sample.
Read the code. Browse the highlighted code with line numbers and folding, search with match case or regex, and jump to any line with Ctrl + G.
Beautify or minify. Switch between Original, Beautified and Minified to see the code formatted or compressed, with the exact size savings.
Analyse, preview and export. Check the outline, colors, variables and issues, preview the styles on a sample page, then copy or download the version you need.
Keyboard shortcuts
Search the codeCtrl + F
Next / previous matchEnter / Shift + Enter
Go to lineCtrl + G
Download the version on screenCtrl + S
Open a fileCtrl + O
Paste CSS to open itCtrl + V
CSS viewer features
Readable code
Selectors, properties, values, colors and comments each get their own color, with line numbers and folding for every block.
Fast on big frameworks
Only the lines on screen are drawn and parsing runs in the background, so even huge stylesheets scroll smoothly.
Beautify & minify
One click turns a one-line .min.css into tidy code, or squeezes your CSS with the CSSO optimiser and shows the savings.
Real outline
Every selector with its specificity, plus @media, @supports, @layer, @font-face, @keyframes and @import blocks.
Colors and variables
All colors in one palette with usage counts and WCAG checks, and every --custom-property with its value and uses.
Error checks
Syntax errors, typos in property names, invalid values, duplicates and unclosed braces, with line numbers.
Live preview
See your styles on a sample page or your own HTML at phone, tablet and desktop widths. Scripts never run.
100% private
Your stylesheet is read by your browser and never uploaded. Close the tab and it is gone.
What is a CSS file?
A CSS file (Cascading Style Sheets, extension .css) holds the design of a web page.
The HTML gives a page its structure, and the stylesheet sets the colors, fonts, spacing and layout.
It is plain text made of rules: a selector such as .button, then declarations like color: #fff; inside curly braces. Pages load it with a <link rel="stylesheet"> tag, so one file can style a whole site.
Because it is text, any editor opens it. An online CSS viewer adds what editors miss: an outline, the color palette, specificity scores and error checks in one place.
How to open a CSS file on Windows, Mac, iPhone and Android
The quickest way on any device is this page: tap browse, pick the file, done.
Windows
Right-click the file, choose Open with and pick Notepad, or a code editor like Visual Studio Code. Dragging it into Chrome or Edge shows the raw text without colors.
Mac
Control-click the file, choose Open With and pick TextEdit or your code editor. Pressing Space in Finder gives a quick plain-text look.
iPhone and iPad
The Files app shows a plain preview of most text files, without any formatting. For colors, beautify and checks, open this page in Safari and choose the file from Files or iCloud Drive.
Android
Many file managers ask which app to use and offer nothing useful. Open this page in Chrome, tap browse and pick the file from Downloads or Drive.
CSS beautifier and minifier in one
Production sites ship minified CSS: one endless line with no spaces or comments.
That saves bytes, but it is impossible to read when you want to learn how a site is styled.
Open a .min.css file here and the viewer notices it is minified and shows the beautified version right away. Switch between Original, Beautified and Minified at any time.
Beautified - one declaration per line, one selector per line and a blank line between rules, indented with 2 spaces, 4 spaces or tabs.
Minified (safe) - comments and whitespace removed, colors and numbers shortened, like #ffffff to #fff.
Minified (aggressive) - also merges duplicate rules and selectors. Usually the smallest file, but test it if rule order matters.
The savings are measured on the real output, also after gzip, which is what your server actually sends. Minifying JavaScript as well? The JS/CSS Minifier handles both.
CSS specificity, explained
When two rules style the same element, the more specific selector wins.
Specificity is counted in three columns: IDs, then classes, attributes and pseudo-classes, then elements and pseudo-elements.
Selector
Specificity
Why
p
0,0,1
One element
.btn:hover
0,2,0
A class and a pseudo-class
nav ul li a
0,0,4
Four elements - still weaker than one class
#header .logo
1,1,0
An ID beats any number of classes
:where(.card) h2
0,0,1
:where() adds nothing
:is(#a, .b) span
1,0,1
:is() counts its strongest argument
The Outline tab shows these numbers for every selector in your file. Sort by specificity to find the IDs and long chains that push you into !important.
Why won't my CSS file open or work?
Most CSS problems come down to a handful of causes.
It opens as code, not as a design
That is normal - a stylesheet is code, and the design appears only on the HTML page that links it. Use the Preview tab here to see the styles applied to a sample page.
Everything is on one line
The file is minified. Press Beautified and download the readable version.
My styles don't apply
Check the path in the <link> tag and clear the browser cache. A syntax error can also drop a rule, and a more specific selector can win - the Issues and Outline tabs show both.
The file was saved in one encoding and read in another. Save it as UTF-8 or add @charset "UTF-8"; as the very first line.
The file downloads instead of opening
Servers often send .css files as downloads. Drop the downloaded file here to read it, or browse all file viewers for other formats.
CSS vs SCSS vs Sass vs LESS
SCSS, Sass and LESS are preprocessors: they add features, then compile to plain CSS for the browser.
Format
Extension
Browsers read it
Variables
Nesting
CSS
.css
Yes, directly
--name custom properties
Yes, in current browsers
SCSS
.scss
No - compile with Sass
$name
Yes
Sass
.sass
No - compile with Sass
$name
Yes, by indentation
LESS
.less
No - compile with Less
@name
Yes
Minified CSS
.min.css
Yes, directly
Same as CSS
Same as CSS
This viewer opens all of them with colors, folding, search and beautify. Spec validation is switched off for SCSS, Sass and LESS because they are not plain CSS.
Convert and reuse your CSS
A stylesheet is often the start of other jobs.
Brand palette - collect every color here, then fine-tune the scheme in the CSS Color Editor or pick colors from a screenshot with the Image Color Picker.
Inline images - small icons are often embedded as data: URIs; make your own with PNG to Base64.
The whole page - open the saved .html file in the HTML File Viewer for a safe preview and an SEO check.
Frequently Asked Questions
Drop the .css file onto this page, click browse, or paste the code. It opens instantly with syntax colors, line numbers and folding, plus an outline, a color palette and a list of issues.
SCSS, Sass and LESS files open too. Nothing is installed and nothing is uploaded.
Open the file and press Beautified above the code. Minified files are spotted automatically and shown beautified straight away.
Pick 2 spaces, 4 spaces or tabs under Options, then download the readable version.
Press Minified to see the compressed CSS with the exact size before and after, also after gzip. Safe mode removes comments and whitespace and shortens values, Aggressive mode also merges rules with the CSSO optimiser.
Any text editor can open a CSS file - Notepad on Windows, TextEdit on a Mac, or a code editor like Visual Studio Code. They show plain text, though, without colors or checks.
On a phone or a shared computer, this page is the quickest option because it runs in the browser.
Open the file and look at the Issues tab. A real CSS parser lists syntax errors, unclosed braces, unknown properties with spelling suggestions, invalid values and duplicate declarations.
It also flags vendor prefixes without the standard property, undefined variables and empty rules, each with a clickable line number.
The Colors tab collects every hex, rgb, hsl, oklch and named color into one palette with usage counts. Click a swatch to copy it, or copy the whole palette as CSS variables.
Text and background pairs are scored against WCAG. Check any pair in detail with the Color Contrast Checker.
Yes. The Preview tab applies your stylesheet to a sample page with buttons, cards, forms and tables, to one element per class selector, or to your own HTML.
Switch between phone, tablet and desktop widths to test your media queries. Scripts never run in the preview.
No. The stylesheet is read and analysed by your own browser and never leaves your device.
Recent files are only remembered if you switch that option on, and then only in this browser.
