radial-gradient(circle at 30% 30%, #fff 0%, #6b36e8 60%) breitet Farbe von einem Mittelpunkt aus, den du in der Vorschau ziehst. Kreis oder Ellipse wählen, Stopps mit Transparenz für Leuchten und Spotlights setzen und über einen festen Hintergrund legen, um weiche Vignetten zu erhalten. Der Code folgt dem Mittelpunkt.
Anleitung
- Oben einen Generator wählen: Verlauf, Schatten, Eckenradius, Glas, Textschatten, Clip-path, Easing, Flexbox oder Grid.
- Regler ändern oder direkt in der Vorschau ziehen: Farbstopps auf der Leiste, Clip-path-Punkte, Bezier-Griffe, die vier Border-Radius-Griffe.
- Optional mit einer Vorlage unter dem Code starten.
- Auf den Code tippen, um ihn zu kopieren. Die letzten Einstellungen jedes Generators werden gespeichert.
- Auf eine freie Stelle der Verlaufsleiste klicken fügt einen Farbstopp mit der Farbe an dieser Stelle hinzu.
- Im 8-Werte-Modus von border-radius bewegen die vier Griffe jeweils Wertepaare, wie bei „Fancy Border Radius“-Tools.
- backdrop-filter braucht in Safari das -webkit-Präfix; der Glas-Code enthält beide.
- Flexbox und Grid: eine nummerierte Box in der Vorschau antippen, um ihr eigenes grow, order oder span zu geben.
Warum CSS visuell erzeugen
Eigenschaften wie box-shadow, clip-path oder cubic-bezier haben mehrere Zahlen, deren Wirkung man sich schwer vorstellen kann. Ein box-shadow von 0 10px 30px -5px rgba(0, 0, 0, 0.25) bedeutet Versatz x, Versatz y, Unschärfe, Ausdehnung und Farbe; cubic-bezier(0.34, 1.56, 0.64, 1) schwingt über, weil der zweite y-Wert über 1 liegt. Form ziehen und Ergebnis sehen geht schneller als Zahlen ändern und neu laden.
Heraus kommt reines CSS, das in allen aktuellen Browsern ohne Framework funktioniert, also direkt in ein Stylesheet, ein CSS-in-JS-Objekt oder eine Design-Token-Datei passt.
Nützliche Referenzwerte
Verlaufswinkel starten oben und drehen im Uhrzeigersinn: 0deg zeigt nach oben, 90deg nach rechts, 180deg nach unten. Die Easing-Schlüsselwörter entsprechen ease = cubic-bezier(0.25, 0.1, 0.25, 1), ease-in = (0.42, 0, 1, 1), ease-out = (0, 0, 0.58, 1) und ease-in-out = (0.42, 0, 0.58, 1); x-Werte müssen zwischen 0 und 1 liegen. border-radius nimmt bis zu acht Werte, horizontale und nach einem Schrägstrich vertikale Radien. So entstehen Blob-Formen wie 30% 70% 70% 30% / 30% 30% 70% 70%.
Tipps für schöne Ergebnisse
Echte Schatten bestehen aus mehreren weichen Ebenen statt einer dunklen, und mit dem Farbton des Hintergrunds eingefärbte Schatten wirken weniger schmutzig als reines Schwarz. Glaseffekte bleiben lesbar, wenn du den Textkontrast über der unruhigsten Stelle des Hintergrunds prüfst. Für Layouts eignet sich Flexbox für eindimensionale Zeilen oder Spalten, Grid für Zeilen und Spalten zugleich; ein Kästchen in der Vorschau antippen, um ihm eigenes grow, order oder span zu geben.
Häufige Fragen
Funktionieren diese CSS-Effekte in allen Browsern?
Verläufe, box-shadow, border-radius, text-shadow, clip-path, cubic-bezier, Flexbox und Grid laufen in allen aktuellen Browsern. backdrop-filter für den Glaseffekt braucht in älteren Safari-Versionen das Präfix -webkit-, der Code enthält deshalb beides.
Wie mache ich einen weichen, realistischen Schatten?
Zwei oder drei Ebenen mit zunehmender Unschärfe und Versatz und geringer Deckkraft stapeln, etwa 0 1px 2px mit 8 %, 0 4px 8px mit 8 % und 0 16px 32px mit 8 %. Die mehrschichtigen Vorlagen sind ein guter Start.
Was unterscheidet linearen, radialen und konischen Verlauf?
Ein linearer Verlauf wechselt die Farbe entlang einer Geraden, ein radialer breitet sich als Kreis oder Ellipse von einem Mittelpunkt aus, und ein konischer dreht die Farben wie ein Uhrzeiger um einen Mittelpunkt, praktisch für Tortendiagramme und Farbkreise.
Wie erstelle ich eine Blob-Form mit border-radius?
Die Acht-Werte-Syntax mit Schrägstrich nutzen, etwa 30% 70% 70% 30% / 30% 30% 70% 70%. In der Vorschau die vier Griffe ziehen, um die Form anzupassen, und das Ergebnis kopieren.
Lassen sich clip-path-Formen animieren?
Ja, zwischen Polygonen mit gleicher Punktzahl. Punktzahl gleich halten, eine transition auf clip-path setzen und das Polygon bei Hover oder per Klasse wechseln.
Darf ich den erzeugten Code frei verwenden?
Ja. Es ist gewöhnliches CSS aus deinen Einstellungen, ohne Lizenz oder Namensnennung.