TF

Design- & CSS-Tools

CSS-Generator: Verläufe, Schatten, Glas, Easing und Blobs

CSS-Verläufe, mehrschichtige Box-Shadows, Glassmorphism-Karten, Cubic-Bezier-Kurven und SVG-Blobs visuell erstellen.

Lineare, radiale oder konische Verläufe mit beliebig vielen Farbstopps erstellen.

Farbstopps
CSS
background: #0f766e;
background: linear-gradient(135deg, #0f766e 0%, #6366f1 100%);

Vorlagen

Was ist dieses Tool?

Fünf Design-Generatoren an einem Ort. Erstelle lineare, radiale und konische Verläufe, staple weiche oder harte Schatten, gestalte Milchglas-Karten, ziehe eine Cubic-Bezier-Kurve und sieh sie animiert, oder erzeuge organische SVG-Blobs. Jede Änderung aktualisiert Vorschau und CSS sofort.

Verläufe unterstützen beliebig viele Farbstopps und wiederholende Varianten und enthalten eine einfarbige Ausweichfarbe. Box-Shadows können bis zu sechs Ebenen haben – ein kleiner scharfer Schatten plus ein großer weicher ist das Geheimnis realistischer Tiefe.

Glassmorphism nutzt backdrop-filter, um alles hinter einer halbtransparenten Karte zu verwischen; das funktioniert in allen modernen Browsern. Der Easing-Editor liefert eine cubic-bezier()-Funktion, und Y-Werte außerhalb von 0–1 erzeugen Überschwingen. Blobs sind glatte, geschlossene Pfade für SVG oder CSS-clip-path.

So verwendest du: CSS-Generator

  1. Einen Generator wählen: Farbverlauf, Box-Shadow, Glassmorphism, Cubic Bezier oder SVG-Blob.
  2. Regler und Farben anpassen oder mit einer Vorlage starten.
  3. Die Live-Vorschau aktualisiert sich bei jeder Änderung.
  4. Das erzeugte CSS kopieren (oder das SVG herunterladen) und ins Projekt einfügen.

Beispiele

Ein mehrschichtiger Schatten

box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.08),
    0px 4px 8px 0px rgba(0, 0, 0, 0.08),
    0px 12px 24px -4px rgba(0, 0, 0, 0.12);

Häufige Fragen

Kann ich direkt auf einen Generator verlinken?

Ja. Hänge ?mode=gradient, ?mode=shadow, ?mode=glass, ?mode=easing oder ?mode=blob an die Seitenadresse an, dann öffnet sich direkt dieser Tab.

Funktioniert Glassmorphism in jedem Browser?

backdrop-filter funktioniert in aktuellen Versionen von Chrome, Edge, Firefox und Safari. Der Code enthält das -webkit--Präfix für ältere Safari-Versionen.

Was ist eine Cubic-Bezier-Timing-Funktion?

Sie steuert, wie eine Animation beschleunigt und abbremst. Die vier Zahlen sind die X- und Y-Koordinaten zweier Kontrollpunkte; ease-in-out ist cubic-bezier(0.42, 0, 0.58, 1).

Darf ich die Blobs kommerziell nutzen?

Ja. Jeder Blob wird auf deinem Gerät erzeugt und gehört dir – überall nutzbar, ohne Namensnennung.

Später mehr Funktionen gewünscht?

Premium-Tools, höhere Limits und API-Zugang sind geplant. V1 bleibt kostenlos und privat in deinem Browser.