CSS Generator Suite – Verläufe & Formen

Was ist die CSS Generator Suite?

Die CSS Generator Suite ist eine browserbasierte Toolbox, die fertig einfügbaren CSS- und Tailwind-Output für fünfzehn gängige Styling-Aufgaben erzeugt – alles über eine einzige Tabbed-Oberfläche. Anstatt Box Shadows, Flexbox-Deklarationen oder Glassmorphism-Regeln von Hand zu schreiben und den Browser zum Prüfen neu zu laden, passen Sie Regler und Dropdowns an, während eine Live-Vorschau sofort aktualisiert wird. Das Ergebnis erscheint direkt unterhalb jedes Bedienfelds – ein Klick kopiert es in die Zwischenablage. Alle Berechnungen laufen vollständig in Ihrem Browser. Es werden keine Dateien hochgeladen, kein Konto ist erforderlich, und das Tool funktioniert offline, sobald die Seite geladen ist.

Typische Nutzer sind Frontend-Entwickler, die schnell Shadow-Stacks prototypisieren möchten, Designer, die cubic-bezier-Werte für Motion-Specs exportieren müssen, und Lernende, die verstehen möchten, wie CSS-Eigenschaften zusammenwirken, indem sie die Vorschau in Echtzeit beobachten.

Hauptfunktionen

• Box Shadow Generator mit Ebenen — Fügen Sie mehrere unabhängige Shadow-Ebenen hinzu, jede mit eigenem offset-X (−50 bis 50 px), offset-Y (−50 bis 50 px), Blur (0–100 px), Spread (−50 bis 50 px), Farbwähler und Inset-Umschalter. Die generierte box-shadow-Deklaration kombiniert alle Ebenen zu einem einzigen kommaseparierten Wert.
• Flexbox Layout Builder — Wählen Sie flex-direction (row, row-reverse, column, column-reverse), justify-content (sechs Werte einschließlich space-evenly), align-items (fünf Werte), flex-wrap und gap (0–48 px in Schritten von 4). Vier nummerierte Platzhalterboxen demonstrieren das Layout live.
• CSS Grid Template Generator — Bearbeiten Sie grid-template-columns und grid-template-rows als Freitext-Strings mit Ein-Klick-Presets (repeat(4, 1fr), 200px 1fr usw.), steuern Sie Gap, align-items, justify-items und sehen Sie eine Vorschau von bis zu sechzehn nummerierten Grid-Zellen.
• Unit Converter (px / rem / em / %) — Geben Sie einen Wert in einer beliebigen Einheit ein und sehen Sie alle vier Äquivalente sofort neu berechnet gegen eine konfigurierbare Basis-Schriftgröße (Standard 16 px). Klicken Sie auf eine Ergebniskarte, um diesen Wert mit angehängter Einheit zu kopieren.
• Cubic Bezier / Easing Generator — Vier Regler steuern P1X, P1Y, P2X, P2Y. Ein Canvas rendert die Bezier-Kurve mit Kontrollpunkt-Handles. Zehn benannte Presets (ease, ease-in-back, ease-out-cubic usw.) werden mit einem einzigen Klick angewendet. Eine Motion-Vorschau animiert einen Block über eine Strecke mit der aktuellen Kurve.
• Clip Path Generator — Unterstützt circle, ellipse, inset und polygon Formen. Der Polygon-Editor enthält sechs Presets (triangle, diamond, pentagon, hexagon, star, arrow).
• Border Radius Generator — Verknüpfter oder Ecken-Modus, optionale 8-Wert-Syntax für asymmetrische Radien und sechs Form-Presets (Rounded, Pill, Leaf, Drop, Squircle, Message).
• Triangle Generator — Erzeugt das klassische border-trick-Dreieck mit null Breite/Höhe in vier Richtungen (up, down, left, right) mit einstellbarer Größe und Farbe.
• Glassmorphism Generator — Steuert Blur-Menge, Hintergrundopazität, Hintergrundfarbe, Randopazität, Randbreite, Shadow-Blur und Shadow-Opazität. Die Vorschau rendert eine Frosted-Card über einem Live-Mehrkreis-Gradienten-Hintergrund.
• Fluid Typography / Clamp Generator — Legen Sie minimale Schriftgröße, maximale Schriftgröße, minimalen Viewport und maximalen Viewport fest. Das Tool berechnet die lineare Interpolations-Steigung und den Y-Achsenabschnitt, gibt einen clamp()-Wert aus und zeigt die aufgelöste Pixelgröße bei jeder Vorschau-Viewport-Breite.
• Neumorphism Generator — Vier Formtypen (flat, concave, convex, pressed) mit Steuerelementen für Abstand, Intensität, Blur, Border Radius, Größe und Hintergrundfarbe.
• Image Filter Generator — Acht CSS-Filter-Funktionen: brightness, contrast, saturation, hue-rotate, blur, grayscale, sepia und invert. Laden Sie Ihr eigenes Bild hoch oder verwenden Sie den eingebauten Gradienten-Platzhalter. Fünf benannte Presets (Vintage, B&W, Warm, Cool, Dramatic).
• Typography Properties Generator — Legt font-size, line-height, letter-spacing, word-spacing, text-transform, text-decoration, font-weight (100–900), font-style, text-shadow (X, Y, blur, color) und Textfarbe fest.
• 3D Transform Generator — Regler für rotateX/Y/Z (±180°), translateX/Y/Z (±200 px), perspective (100–2000 px) und scale. Gibt perspective, transform und transform-style: preserve-3d aus.
• Keyframe Animation Builder — Benennen Sie die Animation, wählen Sie eine CSS-Eigenschaft aus einem Dropdown (transform, opacity, background-color usw.), legen Sie Dauer, Timing-Funktion und Iterationsanzahl fest. Fügen Sie Keyframe-Stopps mit benutzerdefinierten Prozentpositionen und Werten hinzu oder entfernen Sie sie, und sehen Sie die Animation live abspielen.

So verwenden Sie die CSS Generator Suite

Schritt 1: Generator-Tab auswählen

Öffnen Sie das Tool unter /developer/css/css-generators. Die Oberfläche öffnet sich auf dem Box Shadow-Tab. Die Tab-Leiste erstreckt sich über die gesamte Breite des Panels und bricht auf kleineren Bildschirmen um. Klicken Sie auf einen Tab, um den Generator zu wechseln — der Zustand jedes Generators wird während der Navigation zwischen Tabs in derselben Sitzung beibehalten.

Schritt 2: Steuerelemente anpassen

Jeder Generator folgt demselben Muster: Steuerelemente auf einer Seite (oder oben), Live-Vorschau unterhalb der Steuerelemente und ein CSS-Ausgabeblock am unteren Rand.

Für den Box Shadow Generator:

• Der Standard-Shadow beginnt bei offsetX 4 px, offsetY 4 px, blur 8 px, spread 0 px, color #00000040, inset aus.
• Ziehen Sie einen Regler und die weiße Vorschaubox aktualisiert ihren Schatten sofort.
• Klicken Sie auf das Farbfeld, um den nativen Browser-Farbwähler zu öffnen. Die Komponente hängt automatisch 40 (25% Opazität in hex) an die ausgewählte Farbe an.
• Aktivieren Sie das Inset-Kontrollkästchen, um den Schatten ins Element zu kippen.
• Klicken Sie auf "Add Shadow", um eine zweite Ebene einzuführen — jede Ebene erhält ihre eigene Steuerungszeile und eine Papierkorb-Schaltfläche zum Entfernen (die letzte verbleibende Ebene kann nicht entfernt werden).

Beim Flexbox-Generator illustrieren vier nummerierte Boxen die aktuelle Ausrichtung. Das Ändern von flex-direction auf column und justify-content auf space-between aktualisiert ihre Positionen in Echtzeit.

Schritt 3: Generierten CSS lesen

Der CSS-Ausgabeblock erscheint in einer Monospace-Schriftart unterhalb der Steuerelemente jedes Generators. Für Box Shadow ist das Format:

box-shadow: 4px 4px 8px 0px #00000040, inset 2px 2px 4px 0px #ffffff20;

Beim Unit Converter ist die Ausgabe vier anklickbare Karten statt eines Code-Blocks — klicken Sie auf eine Karte, um ihren Wert (z.B. 1.5rem) direkt in die Zwischenablage zu kopieren.

Schritt 4: Kopieren und Einfügen

Jeder Generator hat eine Kopieren-Schaltfläche in der oberen rechten Ecke der Ausgabekarte. Ein Klick schreibt die vollständige Deklaration in Ihre Zwischenablage und löst eine "Copied to clipboard"-Toast-Benachrichtigung aus. Sie können direkt in Ihr Stylesheet oder Ihre Tailwind-Konfiguration einfügen.

Schritt 5: Fluid Typography Formelanzeige verwenden

Der Fluid Typography-Tab enthält eine Formelkarte, die die Steigung und den Y-Achsenabschnitt anzeigt, damit Sie die Mathematik überprüfen oder dokumentieren können:

font-size = 16px + (32 - 16) * ((100vw - 320px) / (1200 - 320))
slope = 1.7241vw | intercept = -0.5rem

Die generierte Ausgabe sieht so aus:

font-size: clamp(1.0000rem, -0.5rem + 1.7241vw, 2.0000rem);

Praktische Beispiele

Geschichteter Karten-Schatten

Ein gängiges Designmuster verwendet zwei Box Shadow-Ebenen, um Umgebungs- und Direktlicht zu simulieren:

1. Öffnen Sie den Box Shadow-Tab.
2. Setzen Sie Shadow 1 auf offsetX 0, offsetY 2 px, blur 4 px, spread 0, color #00000020, inset aus.
3. Klicken Sie auf "Add Shadow". Setzen Sie Shadow 2 auf offsetX 0, offsetY 8 px, blur 24 px, spread 0, color #00000014, inset aus.
4. Kopieren Sie das Ergebnis: box-shadow: 0px 2px 4px 0px #00000020, 0px 8px 24px 0px #00000014;

Responsive Überschriften-Schriftgröße

Eine 20-px-Überschrift auf Mobilgeräten (320-px-Viewport), die auf 48 px auf dem Desktop (1440 px) skaliert:

1. Öffnen Sie den Fluid Typography-Tab.
2. Setzen Sie minimale Schriftgröße auf 20, maximale Schriftgröße auf 48, minimalen Viewport auf 320, maximalen Viewport auf 1440.
3. Ziehen Sie den Vorschau-Viewport-Regler, um Zwischengrößen zu überprüfen.
4. Kopieren: font-size: clamp(1.25rem, 0.2143rem + 3.2143vw, 3rem);

Glassmorphism-Karte

Für eine Frosted-Glass-Benachrichtigungskarte über einem dunklen Gradienten:

1. Öffnen Sie den Glassmorphism-Tab.
2. Setzen Sie Hintergrundfarbe auf weiß (#ffffff), Opazität auf 15%, Blur auf 16 px, Randopazität auf 25%, Randbreite auf 1 px, Shadow-Blur auf 32 px, Shadow-Opazität auf 8%.
3. Die Ausgabe enthält den -webkit-backdrop-filter-Vendor-Präfix automatisch.

Tipps und bewährte Praktiken

Box Shadow inset-Ebenen verleihen Eingabefeldern Tiefe. Verwenden Sie einen kleinen inset Shadow (inset 0px 2px 4px 0px #0000001a) zusammen mit einem äußeren Schatten auf einer Karte, damit Formularfelder eingelassen wirken. Der Generator ermöglicht es Ihnen, beide in einer einzigen Mehr-Ebenen-Deklaration zu kombinieren.

Überprüfen Sie beim Fluid Typography Generator das Klemmen an den Grenzen. Der Vorschau-Viewport-Regler beginnt bei 280 px und geht bis 1920 px. Ziehen Sie ihn auf Ihre minimalen und maximalen Viewports, um zu bestätigen, dass die Schriftgröße genau bei Ihren angegebenen Werten an beiden Enden bleibt — die clamp()-Funktion garantiert dies, aber es zu sehen ist beruhigend.

Wenden Sie im Cubic Bezier Generator zuerst ein Preset an. Die zehn benannten Presets (ease-out-back, ease-in-cubic usw.) dienen als Ausgangspunkte. Wenden Sie eines an, dann passen Sie die P1- und P2-Regler fein ab. Der Canvas zeichnet die Kurve neu und der Motion-Vorschau-Block animiert bei jeder Änderung.

Die Unit Converter Basis-Schriftgröße ist standardmäßig 16 px, aber der Browser-Root kann abweichen. Wenn Ihr Projekt html { font-size: 62.5% } (10 px) setzt, ändern Sie das Basis-Schriftgrößen-Feld vor der Umrechnung auf 10.

Die Clip Path Polygon-Presets erzeugen prozentbasierte Koordinaten, sodass sie bei jeder Elementgröße korrekt skalieren. Das Stern-Preset verwendet zehn Punkte und funktioniert als rein CSS-dekoratives Abzeichen.

Der Keyframe Animation Builder benötigt mindestens zwei Keyframes. Die Entfernen-Schaltfläche ist deaktiviert, wenn nur noch zwei Frames übrig sind.

Häufige Probleme und Fehlerbehebung

Box Shadow-Farbe zeigt nur die ersten sechs Hex-Zeichen im Farbwähler. Die Komponente hängt immer 40 als Alpha-Kanal in hex (#rrggbbaa-Format) an. Das native <input type="color"> zeigt nur den RGB-Teil an. Dies ist erwartet — das Alpha wird separat mit 25% Opazität angewendet. Wenn Sie eine andere Opazität benötigen, kopieren Sie die Ausgabe und passen Sie die letzten zwei Hex-Ziffern manuell an (z.B. 80 für 50%, ff für 100%).

Der Fluid Typography Generator erzeugt negative Intercept-Werte. Dies ist korrekt, wenn der Y-Achsenabschnitt der linearen Gleichung unter null fällt. Der clamp()-Wert löst sich dennoch zu Werten innerhalb des von Ihnen angegebenen Min/Max-Bereichs auf — der negative Intercept ist ein Artefakt der linearen Interpolation, kein Fehler.

Die Glassmorphism-Vorschau erscheint möglicherweise als Volltonfarbe in einigen Browsern. Die backdrop-filter CSS-Eigenschaft erfordert Hardwarebeschleunigung und wird nicht in allen Umgebungen unterstützt. Der Generator gibt den -webkit-backdrop-filter-Präfix neben der Standardeigenschaft aus, aber die Vorschau im Tool selbst wird beeinträchtigt, wenn Ihr Browser die Eigenschaft nicht unterstützt.

Die 3D Transform Vorschau flackert beim Wechseln der Tabs. Die auf das Vorschau-Element angewendete transition: transform 0.2s spielt beim Einbinden ab. Dies ist ein kosmetisches Artefakt des Tab-Einbindezyklus und beeinflusst nicht den generierten Code.

Grid Builder Freitext-Spalten-Eingabe akzeptiert jeden String. Wenn Sie einen ungültigen Wert wie abc 1fr eingeben, enthält die CSS-Ausgabe diesen ungültigen Wert und die Live-Vorschau fällt stillschweigend auf Browser-Standards zurück. Verwenden Sie nur gültige CSS-Grid-Track-Werte: 1fr, auto, min-content, max-content, repeat(3, 1fr) oder feste Pixel-/Prozentwerte.

Datenschutz und Sicherheit

Die CSS Generator Suite läuft vollständig in Ihrem Browser. Keine CSS-Werte, Farbauswahlen oder Eingabedaten werden an einen Server gesendet. Alle fünfzehn Generatoren berechnen ihre Ausgabe mit reinem JavaScript — keine externen Bibliotheken werden zur Laufzeit geladen. Das Bild, das Sie im Image Filter Generator hochladen, wird als lokale Objekt-URL (URL.createObjectURL) geöffnet und wird nie über das Netzwerk übertragen. Das Tool funktioniert vollständig offline, sobald die Seite geladen wurde.

Häufig gestellte Fragen

Ist die CSS Generator Suite kostenlos? Ja, das Tool ist vollständig kostenlos und erfordert kein Konto. Öffnen Sie die Seite und beginnen Sie sofort mit der Generierung.

Funktioniert es offline? Ja. Sobald die Seite in Ihrem Browser geladen ist, funktionieren alle Generatoren ohne Internetverbindung, da jede Berechnung lokal in JavaScript ausgeführt wird.

Sind meine Daten sicher? Ihre Eingaben verlassen nie Ihren Browser. Es gibt keine Analysen zu einzelnen CSS-Werten, keine Formularübermittlungen und keine Serververarbeitung jeglicher Art.

Wie viele Box Shadow-Ebenen kann ich hinzufügen? Die Oberfläche setzt keine harte Grenze für Shadow-Ebenen — Sie können weiterhin auf "Add Shadow" klicken, um so viele Ebenen wie nötig zu stapeln. Browser unterstützen beliebig viele kommaseparierte Shadow-Werte in einer einzigen box-shadow-Deklaration, obwohl die generierte Ausgabe bei vielen Ebenen sehr lang werden kann.

Gibt das Tool auch Tailwind-Klassen sowie Vanilla-CSS aus? Die Konfigurationsbeschreibung und einige Generatoren referenzieren Tailwind-Ausgabe. Der Unit Converter kopiert Werte in rohen Einheiten, die für eine Tailwind-Konfigurationsdatei geeignet sind. Andere Generatoren geben Standard-CSS-Eigenschaftsdeklarationen aus, die Sie direkt in Tailwinds style-Prop oder @layer-Blöcken verwenden können.

Kann ich die Ausgabe des clip-path Generators für SVG verwenden? Nein. Die Ausgabe verwendet CSS clip-path-Prozentsyntax (z.B. polygon(50% 0%, 100% 100%, 0% 100%)), die auf HTML-Elemente angewendet wird. SVG clipPath-Elemente verwenden ein anderes Koordinatensystem und eine andere Syntax.

Der Cubic Bezier Canvas zeigt die Kurve auf Mobilgeräten nicht — ist das ein Fehler? Das Canvas-Element rendert mit dem HTML5 2D-Kontext. In einigen mobilen Browsern werden Canvases innerhalb scrollbarer Overflow-Container möglicherweise nicht korrekt gerendert, bis ein Scroll-Ereignis eintritt. Versuchen Sie, die Seite leicht zu scrollen, um ein Neuzeichnen auszulösen, oder verwenden Sie einen Desktop-Browser für den Bezier-Tab.

Was macht die 8-Wert-Syntax-Option im Border Radius Generator? CSS border-radius akzeptiert einen optionalen zweiten Satz von vier Werten, getrennt durch einen Schrägstrich: border-radius: TL TR BR BL / TL TR BR BL. Der erste Satz steuert den horizontalen Radius jeder Ecke und der zweite Satz steuert den vertikalen Radius, wodurch elliptische Ecken entstehen. Dies erzeugt organische Blob-Formen, die mit der standardmäßigen 4-Wert-Syntax nicht erreicht werden können.

Kann ich meine Einstellungen zwischen Sitzungen speichern? Das Tool speichert Einstellungen nicht zwischen Seitenladevorgängen in localStorage — das Neuladen der Seite setzt alle Generatoren auf ihre Standardwerte zurück. Wenn Sie eine Kombination finden, die Sie wiederverwenden möchten, kopieren Sie die CSS-Ausgabe sofort in Ihren Editor oder Ihr Stylesheet.

Verwendet der Fluid Typography Generator min() und max() oder clamp()? Der Generator gibt clamp(min, preferred, max) aus. Der bevorzugte Wert ist der lineare Interpolationsausdruck (intercept + slope * vw). Dies ist der moderne empfohlene Ansatz und wird in allen aktuellen Browsern unterstützt.

Verwandte Tools

• CSS Generators — Die Suite selbst, für alles, was von den spezialisierten Tools unten nicht abgedeckt wird.
• Type Scale Generator — Erstellen Sie eine vollständige modulare typografische Skala mit musikalischen Verhältnissen, die CSS-Variablen, SCSS-Variablen oder einen Tailwind fontSize-Konfigurationsblock ausgibt.
• Glitch Effect Generator — Generieren Sie animierte CSS-Glitch-Texteffekte mit anpassbaren Farben, Geschwindigkeit und Intensität.
• Color Converter — Konvertieren Sie hex, RGB, HSL und andere Farbformate für die Verwendung in Ihren CSS-Generator-Eingaben.
• Gradient Generator — Erstellen Sie CSS-Gradienten-Hintergründe mit Live-Vorschau.

Jetzt die CSS Generator Suite ausprobieren: CSS Generator Suite