CSS-Minifizierer & Formatierer online — kostenlos, ohne Upload

Fügen Sie unten CSS ein, um es zu minifizieren — Kommentare, Leerzeichen und redundante Regeln werden entfernt — oder es in lesbare, eingerückte Stylesheets zu verwandeln. Beide Richtungen nutzen einen echten CSS-Parser, sodass Custom Properties (--var), Media Queries und Selektorlisten korrekt behandelt werden, statt durch naive Texttricks verstümmelt zu werden.

Was ist dieses Tool?

Ein CSS-Minifizierer schreibt ein Stylesheet so um, dass es so klein wie möglich wird, ohne die Darstellung zu verändern: Er entfernt Kommentare und Leerzeichen, kürzt Farbwerte und Null-Einheiten, wo es sicher ist, fasst doppelte Regeln zusammen und entfernt überflüssige Semikolons.

Dieses Tool basiert auf clean-css, einem CSS-Optimierer, der das Stylesheet tatsächlich in einen AST parst, statt Regex zu verwenden. Deshalb kann es Sonderfälle sicher behandeln, an denen naive Minifizierer scheitern — CSS-Custom-Properties (--main-color: ...), Inhalte innerhalb von Strings sowie komplexe Selektoren und Media Queries kommen alle korrekt heraus.

Warum sollte man es nutzen?

AST-basierte Minifizierung (clean-css), kein Regex — sicher bei Custom Properties, Strings und verschachtelten Media Queries.
Level-2-Optimierungen fassen Regeln zusammen und vereinfachen sie für zusätzliche Einsparungen über das bloße Entfernen von Leerzeichen hinaus.
Sehen Sie genau, wie viele Bytes und wie viel Prozent Sie eingespart haben.
Der Formatier-Modus verwandelt ein minifiziertes Stylesheet zurück in lesbares CSS mit konsistenter Einrückung.
100 % lokale Verarbeitung — proprietäre oder unveröffentlichte Styles verlassen niemals Ihren Browser.

Anleitung

Fügen Sie Ihr CSS in das Eingabefeld ein oder klicken Sie auf „Beispiel laden“, um ein Beispiel mit einer Custom Property und einer Media Query auszuprobieren.
Klicken Sie auf „Minifizieren“, um es zu komprimieren, oder auf „Formatieren“, um es mit 2-Leerzeichen-Einrückung zu verschönern.
Beachten Sie die Meldung unter den Feldern — der Minify-Modus zeigt die Größenreduzierung; ungültiges CSS zeigt einen klaren Fehler, statt stillschweigend ein kaputtes Ergebnis zu erzeugen.
Klicken Sie auf „Kopieren“, um das Ergebnis zu übernehmen.

Beispiel

Eingabe

:root {
  --main-color: #4f46e5;
}

.card {
  color: var(--main-color);
  padding: 16px;
}

@media (max-width: 600px) {
  .card {
    padding: 8px;
  }
}

Ausgabe

:root{--main-color:#4f46e5}.card{color:var(--main-color);padding:16px}@media (max-width:600px){.card{padding:8px}}

Die Custom Property, die Media Query und die Kaskadenreihenfolge bleiben erhalten — nur Leerzeichen, Kommentare und überflüssige Zeichen werden entfernt.

Praktische Tipps

Minifizieren Sie beim Build/Deploy, nicht während der Entwicklung — bearbeiten Sie die lesbare Quelle und lassen Sie dieses Tool (oder Ihre Build-Pipeline) die ausgelieferte Version erzeugen.
Wenn Sie debuggen, warum eine Seite in der Produktion anders aussieht, macht das vorherige Formatieren des minifizierten CSS den Vergleich mit Ihrer Quelle deutlich lesbarer.
Custom Properties überstehen die Minifizierung, daher sind Design-Token-basierte Stylesheets (mit --spacing, --color-* usw.) sicher mit diesem Tool zu verarbeiten.
Kombinieren Sie es mit den unten stehenden HTML- und JS-Minifizierern, wenn Ihr Projekt vor einer Veröffentlichung alles in separaten Dateien hält.

Wo dies in reale Workflows passt

CSS ist eines der lohnenderen Dinge zum Minifizieren, weil Stylesheets standardmäßig renderblockierend sind — jedes eingesparte Byte in einem Stylesheet kann den First Paint etwas verkürzen, besonders bei langsameren Verbindungen. Es ist ein kleinerer Gewinn als die Bildoptimierung, aber im Grunde kostenlos, sobald es in einen Build-Schritt eingebunden ist.

Die Formatier-Richtung ist nützlich für das gegenteilige Problem: das Untersuchen eines minifiziert ausgelieferten Stylesheets eines Wettbewerbers oder einer Legacy-Produktion, um dessen Struktur vor einem Override oder Redesign zu verstehen.

→ HTML-Minifizierer · JavaScript-Minifizierer

Häufige Anwendungsfälle

Ein Stylesheet verkleinern, bevor eine statische Website oder Landingpage deployt wird.
Eine minifizierte CSS-Datei aus einer Live-Website neu formatieren, um deren Struktur zu untersuchen.
CSS bereinigen, das aus einem Design-Tool exportiert wurde und oft übermäßig viele Kommentare und Leerzeichen enthält.
Schnell prüfen, ob ein handgeschriebenes CSS-Snippet korrekt geparst wird, da fehlerhaftes CSS als expliziter Fehler erscheint.

Häufig gestellte Fragen

Wird mein CSS irgendwo hochgeladen?

Nein. Minifizierung und Formatierung laufen beide lokal in Ihrem Browser mit JavaScript ab. Nichts, was Sie einfügen, wird an einen Server gesendet.

Verändert Minifizieren, wie meine Seite aussieht?

Das sollte nicht passieren. Das Tool nutzt clean-css, das CSS korrekt parst und nur Transformationen anwendet, die die ursprüngliche Bedeutung erhalten — es löscht keine Regeln, die es nicht versteht, und rät nicht bei herstellerspezifischer Syntax. Wie bei jedem Minifizierer ist es gute Praxis, die Seite nach dem Deployment des minifizierten Ergebnisses stichprobenartig zu prüfen.

Unterstützt es CSS-Custom-Properties (Variablen)?

Ja. --custom-property-Deklarationen und var()-Referenzen werden korrekt geparst und erhalten, anders als bei manchen regex-basierten Minifizierern, die sie beschädigen können.

Wie viel kleiner wird CSS typischerweise?

Handgeschriebenes CSS mit Kommentaren und großzügigen Leerzeichen schrumpft üblicherweise um 40–60 %. Bereits von einem Build-Tool oder Framework generiertes CSS spart weniger, da es meist schon recht kompakt ist.

Kann ich minifiziertes CSS zurück in ein lesbares Format umwandeln?

Ja — fügen Sie das minifizierte CSS ein und klicken Sie auf „Formatieren“ statt auf „Minifizieren“, um ein sauber eingerücktes, lesbares Stylesheet zu erhalten.

CSS-Minifizierer & Formatierer