CSS-Minifier und -Beautifier
Verkleinere deine Stylesheets, indem Kommentare, Leerraum und leere Regeln entfernt werden – oder umgekehrt: Verwandle minifiziertes CSS in lesbaren, eingerückten Code. Du siehst Original-, End- und gzip-Größe.
Zu 100 % in deinem Browser verarbeitet
Ctrl + Enter ausführenCtrl + C Ergebnis kopieren
So funktioniert es
- 1Füge dein CSS ein, ziehe eine .css-Datei hierher oder lade das Beispiel.
- 2Wähle „Minifizieren“ oder „Verschönern“ und passe die Optionen an (Lizenzen, Optimierung, Einrückung).
- 3Das Ergebnis aktualisiert sich sofort – samt Ersparnis in Bytes und mit gzip.
- 4Kopiere das Ergebnis oder lade es als .css-Datei herunter.
Anwendungsfälle
- CSS für die Produktion vorbereiten und die Core Web Vitals verbessern.
- Minifiziertes CSS einer Website oder Bibliothek lesen und debuggen.
- Messen, wie viel ein Stylesheet komprimiert wirklich wiegt.
- Altes CSS aufräumen: Kommentare und leere Regeln entfernen.
Häufig gestellte Fragen
Was macht die CSS-Minifizierung genau?
Sie entfernt Kommentare, Leerzeichen, Zeilenumbrüche, das letzte Semikolon jedes Blocks und leere Regeln und kürzt Werte wie #aabbcc → #abc oder 0.5 → .5. Der Browser interpretiert das CSS identisch, die Datei ist aber kleiner.
Kann es mein CSS kaputt machen?
Es ist darauf ausgelegt, das nicht zu tun: Text in Anführungszeichen, url()-Werte und Leerzeichen in calc() bleiben erhalten, ebenso Leerzeichen in Nachfahren-Selektoren (z. B. „a :hover“). Prüfe das Ergebnis trotzdem vor der Veröffentlichung.
Warum /*! … */-Kommentare behalten?
Kommentare mit /*! enthalten üblicherweise Lizenzhinweise (MIT, Apache…), die viele Lizenzen auch in minifiziertem Code vorschreiben.
Was bedeutet die Größe „mit gzip“?
Die ungefähre Größe, die über das Netzwerk übertragen wird, wenn dein Server mit gzip komprimiert – berechnet im Browser mit CompressionStream. Diese Zahl bestimmt tatsächlich die Ladegeschwindigkeit.