How to use

To use our free online CSS compare tool, just follow these steps:

1. Use Copy & Paste or click Load File to load the stylesheets you want to compare
2. If the CSS data is difficult to read (e.g. contains no line breaks), click the Prettify buttons
3. Click Compare

You should now see a side-by-side comparison of your CSS selectors and properties. The diff still shows the original stylesheets you entered, but the two stylesheets sets are now aligned with each other. Red and green highlighting helps you see where the values differ.

Selectors or properties that are only present on the left side are highlighted in red while declarations that are unique to the right side set are highlighted in green.

If there is a lot of overlap between the two versions of your CSS stylesheets, identical areas are excluded from the diff to help you focus on the actual changes.

Check out our documentation to learn more.

How it works

The tool compares CSS selectors and properties by first parsing them into a data structure that is independent of their textual representation. This helps us ignore changes that are unrelated to the encoded values, such as adding optional semicolons or whitespace outside of strings.

Afterwards, the remaining changes are mapped back to the text you inserted to highlight the modifications. Unlike most other online CSS diff tools, our tool does not reformat your CSS input. This should help you locate the changes in the original input. If you like, you can still reformat your input using the Prettify buttons before diffing.

Offline usage

Our online CSS diff tool requires an internet connection to work because the computation is performed on our servers. If you are looking for a semantic CSS comparison that works offline, you may want to check out our SemanticDiff Visual Studio Code extension. It can not only compare CSS files but also supports various other programming languages and data formats. The extension performs all computations locally, so your data never leaves your machine.