CSS Hintergrund-Generator

Ein CSS-Hintergrund ist mehr als eine einzelne Farbe. Dieses Tool erstellt fünf Arten: einfarbig, linearer Verlauf, radialer Verlauf, konischer Verlauf und ein sich wiederholendes Muster, und zeigt genau, wie jede davon geschrieben wird.

Wechsle oben den Modus, um zu ändern, was die Regler darunter steuern. Lineare Verläufe vermischen Farben entlang einer geraden Linie, du legst also den Winkel und jeden Farbstopp fest. Radiale Verläufe breiten sich von einem Mittelpunkt aus, also wählst du stattdessen eine Kreis- oder Ellipsenform und eine Position. Konische Verläufe drehen Farben um einen Mittelpunkt wie ein Farbrad, die Technik hinter reinen CSS-Kreisdiagrammen. Füge Farbstopps hinzu oder entferne sie, um zu steuern, wie viele Farben sich mischen und wo jede sitzt, bis zu vier pro Verlauf.

Der Muster-Modus funktioniert anders: Statt eines weichen Übergangs wiederholt er eine kleine Form, Streifen, Punkte, ein Raster oder ein Schachbrett, über den Hintergrund mit sich wiederholenden Verläufen und background-size und gibt dir so Struktur statt eines Verlaufs. Passe die beiden Farben und den Abstandsregler an, um zu bestimmen, wie eng oder weit das Muster wirkt.

Die Vorschau aktualisiert sich bei jeder Änderung, und der Umschalter für hellen und dunklen Text zeigt, ob dein Hintergrund ein sicherer Ort für lesbaren Text ist, da ein Ende eines Verlaufs oft deutlich heller ist als das andere. Sobald es passt, kopiere die CSS-Deklaration unter der Vorschau und füge sie in die background-Eigenschaft jedes Elements ein. Alles läuft in deinem Browser; nichts, was du hier gestaltest, wird gespeichert oder irgendwohin gesendet.