Paste two versions of CSS code, or drop .css, .scss and .less files, to see every change highlighted. Use it to compare two stylesheets, check what a build tool changed, or review a theme update. Diffspot highlights CSS syntax, marks changed words inside each line and recognizes moved blocks. Press Try an example to see it on a real CSS change.
How to compare CSS files
- Paste or drop the original CSS code on the left.
- Paste or drop the changed version on the right. The diff updates as you type.
- Jump between changes with F7 and Shift+F7, or switch to Unified view to read it like a pull request.
- Copy or export a unified diff, a .patch file or an HTML report.
CSS comparison tips
- Comparing CSSReordered rules are detected as moves, so reorganizing a stylesheet doesn't bury the real changes.
- Your code stays privateThe comparison runs on your device in WebAssembly. Proprietary code is never uploaded or stored.
- Fast on large filesFiles with hundreds of thousands of lines compare in about a second.
Advertisement
Frequently asked questions
Is CSS detected automatically?
Yes. Diffspot recognizes CSS from the file name (.css, .scss and .less) or from the code itself. You can also choose it in the Syntax menu.
Is my code uploaded?
No. The page loads the diff engine once; after that your code stays in the browser tab. How Diffspot works explains how you can check this yourself.
Can I get a patch file?
Yes. Export → Download .patch creates a standard unified diff that git apply or patch can apply.