Paste your original CSS in the left panel and the updated version in the right panel, then click Find Differences. Added lines appear in green, removed in red. Upload .css, .scss, .sass, or .less files directly. All processing runs in your browser - nothing is sent to a server.
How to use this tool
Paste or upload your original stylesheet on the left and the changed version on the right. Click "Find Differences." The diff shows every added and removed line with line numbers. Toggle Unified or Side-by-Side view. Uploads filter to .css, .scss, .sass, and .less files.
CSS diff considerations
Formatter-driven changes
A CSS formatter or linter (Prettier, Stylelint) can change many lines at once - property order, whitespace, brace placement, or semicolons. If you are looking for logical changes only, run both files through the same formatter before diffing.
Vendor prefix additions
Adding or removing -webkit-, -moz-, or -ms- prefixes shows each prefix line as added or removed. A single property change with autoprefixer can expand to three or four diff lines.
SCSS nesting and variables
SCSS nesting means a single selector change can affect many indented child rules. A renamed SCSS variable will appear as one removed line and one added line at the variable declaration, plus a change on every line that uses it.
Use cases
Design system token changes
Compare two versions of a design token stylesheet to see exactly which color, spacing, or typography values changed between design releases.
Cross-browser stylesheet debugging
Compare the CSS applied in two different browsers by copying the computed styles from DevTools and diffing them to find which properties differ.
Theme overrides
When updating a third-party component library, compare the old and new override stylesheets to ensure all custom overrides still apply correctly after the update.
FAQs
Can I compare SCSS or Sass files?
Yes. SCSS, Sass, and Less files are plain text. The file upload accepts .css, .scss, .sass, and .less.
Does this compare computed CSS?
No. The tool compares the raw CSS source text. Paste computed styles from browser DevTools if you want to compare what the browser actually applies.
Is my CSS private?
Yes. All processing runs in your browser. No code is sent to any server.