CSS Compare
Compare two CSS snippets and highlight property-level differences.
How CSS Compare works
A plain text diff on a stylesheet flags changed lines, so reordering declarations or reformatting whitespace shows up as noise even when nothing actually changed visually. CSS Compare instead parses both snippets into rules (selectors and, separately, each selector nested inside an @media or @supports block) and compares them property by property. For every selector you get one of four verdicts: the rule was added, removed, changed (with each property's old and new value shown), or left unchanged. Comments are ignored, and declaration order within a rule does not affect the result, but property values are compared as exact strings — so #fff and #ffffff are reported as a change even though a browser renders them identically. Everything runs locally in your browser — nothing you paste is uploaded anywhere.
Related tools: the CSS formatter, the text diff tool, and the CSS specificity calculator.
Built and maintained by Meet Shah · Last updated
What this tool is used for
- Finding which properties changed between two versions of a stylesheet.
- Comparing a built stylesheet against the previous release.
- Checking exactly what a refactor changed, ignoring formatting.
- Auditing a vendor stylesheet update before adopting it into a build.
- Confirming a change touched only the selectors you intended.
Frequently Asked Questions
- What does it compare?
- Rules by selector and declarations by property, reporting each as added, removed, changed or unchanged. It is a structural diff rather than a text diff, so reordered rules and reformatted whitespace do not register as changes.
- Is the same selector inside a media query treated separately?
- Yes. The at-rule context is part of the rule's path, so `.card` at top level and `.card` inside `@media (max-width: 600px)` are distinct rules — which is correct, since they apply under different conditions.
- How are duplicate declarations in one block handled?
- Last one wins, matching the cascade. A block declaring `color` twice keeps the second value, so the diff reflects what the browser would actually apply rather than what the file happens to contain.
- Are comments compared?
- No, they are stripped before parsing — but only outside string literals, so a `/*` inside a `content` value does not start a comment and swallow the rest of the rule.
- Why does a shorthand change show as unrelated properties?
- Because `margin: 0` and `margin-top: 0` are different properties even when the computed result overlaps. The diff works at the declaration level, so replacing a shorthand with longhands shows as one removal and several additions.
- What is this useful for?
- Confirming what a build step, a minifier or a framework upgrade actually changed, and checking that a refactor is a no-op. Seeing zero changed declarations is a much stronger signal than reading two files side by side.
Common errors and gotchas
- Diffing formatted against minified CSS, where a text diff shows everything as changed.
- Ignoring rule order, which affects which of two equal-specificity rules applies.
- Assuming an identical property set means identical rendering, when order and specificity matter.
- Comparing source when a build step transforms it before serving.
- Reading a reordered declaration as a change, when within a rule the order rarely matters.