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
Verlaufstext (Gradient Text mit CSS)
Überschriften mit Farbverlauf, auf Wunsch mit wanderndem Glanz: CSS mit background-clip, Tailwind-Klassen, SVG und PNG.
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?
Verlaufstext füllt Buchstaben mit einem Farbverlauf statt mit einer einzelnen Farbe. Im Web klappt das mit background-clip: text, das den Hintergrund nur innerhalb der Buchstaben zeigt. So fallen Überschriften, Hero-Bereiche und Logos auf.
Wofür du es brauchst
Hero-Überschriften
Eine Überschrift mit Verlauf gibt einer Landingpage einen Blickfang, ganz ohne Bild.
Knöpfe und Hervorhebungen
Hebe ein Wort im Satz oder die Beschriftung eines Call-to-Action hervor.
Social Media und Folien
Exportiere den Text als PNG oder SVG für Social Posts, Thumbnails und Präsentationen.
So geht’s
Tippe deinen Text und wähle Schrift, Stärke und Grösse. Bestimme Farben und Richtung des Verlaufs und schalte den Glanz ein, wenn die Farben durch den Text wandern sollen. Kopiere das CSS oder die Tailwind-Klassen oder exportiere die Überschrift als SVG, PNG oder GIF.
Verlaufstext jetzt ausprobierenTipps
- Wähle Farben mit ähnlicher Helligkeit, damit jeder Buchstabe lesbar bleibt.
- Fette Schriften zeigen Verläufe am besten; dünne Buchstaben lassen den Farben wenig Platz.
- Die Glanz-Animation stoppt automatisch für Menschen, die weniger Bewegung wünschen.
Häufige Fragen
- Ist Verlaufstext barrierefrei?
- Ja, er bleibt echter Text, den Screenreader vorlesen und man markieren kann. Prüfe den Kontrast der dunkelsten und hellsten Farbe zum Hintergrund.
- Wozu brauche ich -webkit-background-clip?
- Einige Browser brauchen noch die Eigenschaft mit Präfix. Der Export enthält beide, damit der Effekt überall funktioniert.
- Kann ich meine eigene Schrift nutzen?
- Ja. Das CSS funktioniert mit jeder Schrift deiner Website; die Vorschau nutzt Systemschriften als Platzhalter.
- Enthält das SVG den Text als Pfade?
- Nein. Es enthält echten Text mit Systemschriften, darum bleibt es klein und bearbeitbar. Auf anderen Computern kann die Schrift leicht anders aussehen.
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