Duplicate CSS Remover & Merger
Stylesheets collect repeats over time: the same selector declared in three places, or the same property set twice in one rule. This tool finds them, folds each group of matching rules into a single rule, and explains exactly what it changed and why. It keeps the value the browser would actually use, so the cleaned CSS behaves the same as the original.
Paste your CSS or add several files in the order your pages load them. The merged CSS updates as you type, and the summary lists every decision with line numbers. Everything runs in your browser, so your CSS never leaves your device.
Put your files in the order they are loaded, the same order as your <link> tags, with the first one at the top. When files clash, the later file wins, so the wrong order can change which value is kept. Use the arrows to reorder.
CSSYour CSS
CSSMerged CSS
Summary of changes
About this tool
How the merging works
When two rules have the same selector and the same specificity, the browser uses whichever value comes last. The tool applies the same logic. In this example, the first margin never has any effect:
body { color: red; margin: 10px; }
body { margin: 15px; }The result is one rule with color: red and margin: 15px, and the summary explains the removed value with its line number.
What counts as a duplicate
- Same selector, compared after tidying spaces, so
h1,h2andh1, h2match.h2, h1is treated as different. - Same property. Property names aren’t case-sensitive, but custom properties such as
--Brandare compared exactly. - Same context. Rules inside
@media,@supports,@layeror@containeronly merge with rules in that same block. - Repeats inside one rule are cleaned up too, with the later one winning.
!important and fallbacks
A value marked !important beats later normal declarations, so it’s kept and labelled !important wins. A later !important still overrides it.
With Keep likely fallbacks on, deliberate pairs in the same rule are kept, such as a vendor-prefixed value followed by the standard one (display: -webkit-box; display: flex), a plain value followed by one using calc(), var(), clamp() or a modern color function, or 100vh followed by 100dvh.
Working with several files
Add each stylesheet with Add files, or drag them onto the files panel, and put them in the order the browser loads them, because a later file overrides an earlier one. Combine into one file joins them and moves @charset and @import to the top. Keep files separate cleans each file on its own, never moves rules between files, and lists selectors that appear in more than one file. Download one file or all of them as a .zip.
Mistake detection
After merging, the values that were kept are checked for two common typos: hex colors with the wrong number of digits, such as #12, and numbers with an unknown unit, such as 10xp. These are listed but not changed. For a full check, use the CSS Validator.
What the tool doesn’t do
- Shorthands and longhands, such as
marginandmargin-top, are treated as different properties. - Only identical selectors are merged. Different selectors that match the same element are left alone.
@keyframes,@font-face, other at-rules and rules with nested CSS are copied as written, and comments are removed.- Fallback detection is a heuristic, so check any property marked last wins if you rely on an unusual fallback.
Frequently Asked Questions
What does the Duplicate CSS Remover do?
It finds rules that use the same selector and combines them into one, and removes properties that are declared more than once. For each property it keeps the value the browser would actually apply, so the cleaned CSS looks the same on the page. A summary explains every change with line numbers.
How does it decide which value to keep?
It follows the cascade. For the same selector, the browser uses the last declaration, so the last value wins. The exception is !important: an important value beats later normal declarations, so it’s kept instead. A later !important still wins over an earlier one.
Will merging change how my page looks?
Normally not, because only the values the browser would ignore are removed. The one thing to watch is placement: the merged rule sits where the first (or last) original was. If a different rule with the same specificity sits between the originals, moving declarations can change which one wins. The summary reminds you to check, and the Place merged rule at option lets you try the other position.
What are fallbacks, and why are some duplicates kept?
Authors sometimes repeat a property on purpose so older browsers get a value they understand, for example display: -webkit-box; display: flex; or height: 100vh; height: 100dvh;. Browsers skip values they don’t support, so both are needed. With Keep likely fallbacks on, these pairs are kept and marked in the summary. Switch it off to treat every repeat as an override.
Are rules inside media queries merged?
Yes, but only with other rules in the same block. Rules inside @media, @supports, @layer or @container are merged with matching rules in the same block, and never with rules outside it.
Can I clean up several CSS files at once?
Yes. Add your files and put them in the order your pages load them. Combine into one file merges everything into one stylesheet. Keep files separate cleans each file on its own and shows the selectors that appear in more than one file, with an option to remove declarations that exactly repeat an earlier file. You can download each file or all of them as a .zip.
Why does the tool say a value might be a mistake?
After merging, it checks the values it kept for hex colors with the wrong number of digits, such as #12, and numbers followed by an unknown unit, such as 10xp. Browsers ignore these, so they’re worth fixing. They’re listed but never changed.
What doesn’t it merge?
Different selectors that match the same element, shorthands and longhands such as margin and margin-top, @keyframes, @font-face and rules that contain nested CSS. These are copied through unchanged and listed in the summary. Comments are removed from the output.
Is my CSS uploaded?
No. The tool runs entirely in your browser, so your CSS never leaves your device and nothing is stored.