CSS-Generator
Farbverläufe, Box-Schatten und abgerundete Ecken visuell gestalten und das passende CSS kopieren.
CSS-Generator - Farbverläufe, Box-Schatten und abgerundete Ecken
Gestalten Sie drei der meistgenutzten CSS-Effekte nach Augenmaß statt durch Ausprobieren: Farbverläufe, Box-Schatten und Eckenradien. Bewegen Sie einen Regler oder wählen Sie eine Farbe, und die Vorschau ändert sich sofort; das CSS darunter entspricht immer genau dem, was die Vorschau zeigt, und ist bereit für Ihr Stylesheet.
Die Ausgabe nutzt die Standard-Eigenschaften background, box-shadow und border-radius, die jeder aktuelle Browser ohne Herstellerpräfixe unterstützt. Es wird nichts irgendwohin gesendet: Das Werkzeug läuft in Ihrem Browser.
So verwenden Sie das Werkzeug
- Wählen Sie Farbverlauf, Box-Schatten oder Eckenradius.
- Bewegen Sie die Regler, tippen Sie genaue Zahlen in die Felder daneben oder wählen Sie Farben.
- Klicken Sie auf Zufall für einen Ausgangspunkt oder auf Zurücksetzen, um zu den Standardwerten zurückzukehren.
- Kopieren Sie das CSS unter der Vorschau.
Farbverläufe
Ein Farbverlauf ist ein Bild, das der Browser zeichnet. Er gehört daher in background (oder background-image) und skaliert auf jede Größe, ohne unscharf zu werden. Drei Arten stehen zur Wahl:
| Typ | Beispiel | Wirkung |
|---|---|---|
| Linear | linear-gradient(135deg, #6c5ce7 0%, #00b894 100%) | Die Farben wechseln entlang einer Geraden im eingestellten Winkel |
| Radial | radial-gradient(circle, #6c5ce7 0%, #00b894 100%) | Die Farben breiten sich in Ringen von der Mitte aus |
| Konisch | conic-gradient(from 135deg, #6c5ce7 0%, #00b894 100%) | Die Farben drehen sich wie ein Farbkreis um die Mitte |
Jede Farbe hat eine Position in Prozent. Zwei Farben an derselben Position ergeben eine harte Kante statt eines Übergangs; so entstehen Streifen und Tortendiagramme in reinem CSS. Mit Farbe hinzufügen kommen bis zu sechs Farbstopps zusammen, gleichmäßig verteilt; Farbe entfernen nimmt den letzten weg, bis noch zwei übrig sind.
Winkel beginnen in CSS oben und drehen im Uhrzeigersinn: 0deg zeigt nach oben, 90deg nach rechts und 180deg nach unten.
Box-Schatten
Ein Box-Schatten nimmt bis zu fünf Werte: horizontaler Versatz, vertikaler Versatz, Unschärfe, Ausdehnung und Farbe, dazu optional das Schlüsselwort inset.
- Horizontal und Vertikal verschieben den Schatten; negative Werte verschieben ihn nach links oder oben.
- Unschärfe macht die Kante weich. 0 ergibt einen harten Schatten wie ausgeschnitten.
- Ausdehnung vergrößert den Schatten vor dem Weichzeichnen. Eine negative Ausdehnung mit großer Unschärfe ergibt den weichen, schwebenden Look, der in modernen Oberflächen verbreitet ist.
- Deckkraft steckt als
rgba()in der Farbe, sodass der Schatten nie verdeckt, was dahinter liegt. - Innerer Schatten (inset) zeichnet ihn innerhalb der Box, die dadurch eingedrückt wirkt.
Dezente Schatten wirken meist besser als kräftige: Eine dunkle, leicht transparente Farbe aus Ihrer Palette fügt sich natürlicher ein als reines Schwarz.
Eckenradius
Ist Gleicher Wert für alle Ecken angehakt, rundet ein einziger Regler alle vier Ecken. Entfernen Sie den Haken, um jede Ecke einzeln einzustellen; das CSS listet dann vier Werte in der Reihenfolge oben links, oben rechts, unten rechts, unten links.
In Pixeln bleibt die Rundung bei jeder Größe gleich. In Prozent folgt sie der Box: border-radius: 50% macht aus einem Quadrat einen Kreis und aus einem Rechteck eine Ellipse.
Verwandte Werkzeuge
Um eine Farbe zwischen HEX, RGB und HSL umzurechnen oder eine mit genug Kontrast zum Hintergrund zu finden, nutzen Sie den Farbkonverter. Um das Stylesheet, in das Sie das CSS einfügen, aufzuräumen oder zu minifizieren, nutzen Sie den Code Formatter. Die Aufgabenseiten öffnen dieses Werkzeug direkt auf einem Effekt: CSS-Farbverlauf-Generator, Box-Shadow-Generator und Border-Radius-Generator.