CSS Diff
Compare two CSS files side by side with syntax-aware change highlighting
All processing happens in your browser. No data is sent to any server.
+15 added-8 removed20 unchanged
1 .container {
2- max-width: 1200px;
3+ max-width: 1440px;
4 margin: 0 auto;
5- padding: 0 16px;
6+ padding: 0 24px;
7 }
8
9 .header {
10 background: #ffffff;
11 border-bottom: 1px solid #e5e7eb;
12- padding: 12px 24px;
13+ padding: 16px 32px;
14+ position: sticky;
15+ top: 0;
16+ z-index: 100;
17 }
18
19 .nav-link {
20 color: #374151;
21- font-size: 14px;
22+ font-size: 15px;
23+ font-weight: 500;
24 text-decoration: none;
25+ transition: color 0.2s;
26 }
27
28 .nav-link:hover {
29- color: #1f2937;
30+ color: #2563eb;
31 }
32
33 .btn-primary {
34- background: #3b82f6;
35+ background: #2563eb;
36 color: white;
37- padding: 8px 16px;
38- border-radius: 4px;
39+ padding: 10px 20px;
40+ border-radius: 8px;
41+ font-weight: 600;
42+ transition: background 0.2s;
43 }
Why This Tool
Comparing CSS changes manually is tedious, especially with large stylesheets. This tool shows a clear side-by-side diff of two CSS files, highlighting added, removed, and modified rules so you can review changes quickly.
How It Works
Paste your original CSS in the left panel and the modified CSS in the right panel. The tool compares them line by line and highlights differences with color coding — green for additions, red for deletions.