Glas- und Rahmen-Effekte
Milchglas, Verlaufsrahmen und Leuchten für Karten und Hero-Bereiche. Echtes CSS mit Vorschau, kopierbar als CSS, Tailwind oder HTML.
Im Editor öffnenCSS-Effekte und Layouts
Fliessende Abstandsskala (Fluid Spacing mit clamp)
Abstände, die mit der Bildschirmbreite wachsen: Grössen von 3xs bis 3xl als CSS clamp(), mit CSS-Variablen, Hilfsklassen und Tailwind-Theme.
Generator öffnenLäuft direkt in deinem Browser. Deine Grafiken entstehen auf deinem Gerät.
Mit einem Preset starten
Wähle ein Preset, es öffnet sich direkt im Editor. Dort passt du alles an.
Worum geht’s?
Eine fliessende Abstandsskala ist eine Reihe von Abständen (Innenabstand, Lücken, Ränder), die mit der Bildschirmbreite gleichmässig wachsen. Jede Grösse ist ein festes Vielfaches eines Grundabstands und steht als CSS clamp() im Code. So sind Abstände auf kleinen Bildschirmen enger und auf grossen grosszügiger, ganz ohne Breakpoints.
Wofür du es brauchst
Einheitliche Layouts
Eine Skala für alle Abstände hält eine Website ruhig und stimmig, vom Knopf bis zum ganzen Abschnitt.
Weniger Breakpoints
Abstände, die mit dem Bildschirm wachsen, ersetzen viele Media Queries für Innen- und Aussenabstände.
Design-Tokens
Die Variablen passen direkt in ein Designsystem oder ein Tailwind-v4-Theme.
So geht’s
Lege die kleinste und grösste Bildschirmbreite und den Grundabstand für beide fest. Wähle, wie viele Grössen du unter und über dem Grundabstand brauchst, und füge Paare hinzu, die über den Bereich von einer Grösse zur nächsten springen. Prüfe die Grössen in der Vorschau bei jeder Breite und kopiere CSS-Variablen, Hilfsklassen oder ein Tailwind-Theme.
Fliessende Abstandsskala jetzt ausprobierenTipps
- Kombiniere die Abstandsskala mit der fliessenden Schriftskala und nutze für beide denselben Breitenbereich.
- Paare wie s-l eignen sich für Abschnittsabstände, die sich zwischen Handy und Desktop stark ändern sollen.
- Halte den Grundabstand nahe an deiner Textgrösse, oft 16 bis 20 px.
Häufige Fragen
- Wie werden die Grössen berechnet?
- Jede Grösse ist ein festes Vielfaches des Grundabstands: 3xs ist ein Viertel, s der Grundabstand, m das 1,5-Fache, l das Doppelte, bis 3xl mit dem Sechsfachen. Der Grundabstand selbst wächst linear zwischen den beiden Bildschirmbreiten.
- Was sind Paare?
- Ein Paar geht auf kleinen Bildschirmen von einer Grösse zu einer grösseren auf grossen Bildschirmen, zum Beispiel von s bis l. Es wächst schneller als eine einzelne Grösse.
- Funktioniert das mit Tailwind?
- Ja. Der Tailwind-Export definiert --spacing-*-Variablen für Tailwind v4, damit Klassen wie p-s, gap-m oder mt-xl die fliessenden Werte nutzen.
- Ist clamp() sicher beim Zoomen?
- Ja. Die Werte verbinden rem und vw, darum wachsen sie mit, wenn jemand die Seite zoomt.
Passende Generatoren
Alle Generatoren in CSS-Effekte und Layouts
Bento-Grid
Ungleich grosse, abgerundete Kacheln in einem Raster, ohne Lücken. Für Feature-Sektionen, Portfolios und Social-Grafiken, als CSS Grid, Tailwind oder Bild.
Im Editor öffnen
CSS-Schatten-Generator
Weiche, mehrschichtige Schatten für Karten und Buttons. Vorschau mit echtem CSS, Export als box-shadow, Tailwind oder drop-shadow.
Im Editor öffnen
Animierter Farbverlauf
Wandernde, drehende und farbwechselnde Verläufe und schwebende Flecken als reines CSS. CSS, Tailwind oder HTML kopieren, PNG und GIF exportieren.
Im Editor öffnen
Fliessende Schriftskala
Schriftgrössen, die mit der Bildschirmbreite wachsen: eine typografische Skala als CSS clamp(), mit CSS-Variablen und Tailwind-Theme zum Kopieren.
Im Editor öffnen
Abschnittstrenner-Generator
Wellen, Bögen, Schrägen, Zacken und mehr als Übergang zwischen zwei Website-Abschnitten. Ein SVG, das sich jeder Breite anpasst, mit HTML und CSS zum Kopieren.
Im Editor öffnen