CSS Difference Checker
Compare two versions of a stylesheet and see what really changed. Unlike a line-by-line diff, this tool compares rules and properties, so different formatting, reordered properties, comments and minified versus beautified code don’t show up as changes. It lists every added, removed, changed, moved and renamed rule, and highlights them in both versions.
Paste the original CSS on the left and the modified CSS on the right. The comparison updates as you type, and everything runs in your browser.
AOriginal
BModified
Differences
About this tool
Why compare rules instead of lines?
A normal text diff shows every line that differs, so reformatting a file, minifying it or reordering properties makes almost everything look changed. This tool reads both stylesheets as CSS and matches rules by selector and context, then compares their properties. Only real changes are listed.
The kinds of change
- Added and Removed: a rule that exists in only one version.
- Changed: the same rule with properties added, removed or given new values.
- Moved: the same rule in a different position, which can change the cascade.
- Renamed: a different selector with exactly the same declarations.
How rules are matched
Rules match when they have the same selector inside the same @media, @supports, @layer or @container block. Spacing and the order of selectors in a list don’t matter, so h1, h2 matches h2,h1. @font-face rules are matched by family, weight and style, and nested rules are compared with their full selector.
Equivalent values
With Treat equivalent values as equal on, values that mean the same thing aren’t reported: #FFF and #ffffff, 0px and 0, .5 and 0.5, and differences in spacing after commas. Switch it off to see every textual change. Ignore case in values also treats RED and red as equal.
Frequently Asked Questions
What does the CSS Difference Checker do?
It compares two stylesheets and lists the rules that were added, removed, changed, moved or renamed, with the exact properties that differ. The changes are also highlighted in both editors. Click a change to jump to it in both versions.
How is it different from a normal text diff?
A text diff compares lines, so reformatting, minifying or reordering properties makes almost every line look different. This tool compares the CSS itself: rules are matched by selector and properties by name, so formatting, comments and property order don’t count as changes.
What does “moved” mean?
The rule is the same in both versions but appears in a different position relative to other rules. Moving a rule can change which rule wins when two selectors have the same specificity, so it’s worth checking. A Renamed rule has a different selector but exactly the same declarations.
Why aren’t some value differences reported?
With Treat equivalent values as equal switched on, values that mean the same are treated as equal, for example #FFF and #ffffff, 0px and 0, or .5 and 0.5. Switch it off to see every difference in the text.
Are media queries compared?
Yes. Rules inside @media, @supports, @layer and @container are compared with rules inside the same block in the other version, and each change shows which block it’s in. Rules inside @keyframes are compared by keyframe.
What happens if a selector appears more than once?
Rules with the same selector in the same block are combined, with later properties overriding earlier ones, which is how the browser applies them. The comparison is between the final result for each selector.
Can I share or save the result?
Use Copy report to copy a plain-text list of every change, with + for added, - for removed and ~ for changed properties. You can paste it into a pull request, a ticket or an email.
Is my CSS uploaded?
No. Both stylesheets are compared in your browser, so your code never leaves your device and nothing is stored.