So verwenden Sie CSS-Farbverläufe für Hintergründe in Shopify und GemPages

Was ist ein CSS-Farbverlauf?

A CSS-Farbverlauf ist ein Hintergrundstil, der zwischen zwei oder mehr Farben wechselt. Im Gegensatz zu herkömmlichen Bildern werden Farbverläufe mit Code erstellt, wodurch sie skalierbar, leichtgewichtig und einfach anpassbar sind.

Es gibt drei Haupttypen von CSS-Verläufen:

• Lineare Farbverläufe: Farbübergänge entlang einer geraden Linie (z. B. von oben nach unten oder von links nach rechts).
  Ejemplo: linearer Farbverlauf (rot, grün)
• Radiale Farbverläufe: Farben strahlen von einem Mittelpunkt nach außen.
  Ejemplo: radialer Farbverlauf (Kreis, blau, weiß)
• Konische Gradienten: Farben werden wie bei einem Kreisdiagramm um einen Mittelpunkt gedreht.
  Ejemplo: Kegelschnitt-Gradient (ab 90 Grad, rot, gelb, grün)

Empfohlene CSS-Gradientengeneratoren

Diese kostenlosen Tools machen es einfacher:

• CSS-Verlauf – Benutzerfreundliche Oberfläche für lineare und radiale Farbverläufe
• uiFarbverläufe– Schöne, gebrauchsfertige Voreinstellungen
• Coolors Gradientengenerator – Ideal für Markenpaletten
• Gradientenjagd – Von der Community kuratierte Farbverläufe

Diese Generatoren bieten visuelle Vorschauen und ermöglichen Ihnen das Kopieren des CSS mit einem einzigen Klick.

So richten Sie einen Farbverlaufshintergrund in Shopify ein

Mit Shopify-Themes können Sie jetzt Farbverläufe direkt aus dem ThemeneditorSo geht's mit benutzerdefiniertem CSS:

Schritt 1: Gehe zu Online-Shop > Themen in Ihrem Shopify-Adminbereich.

Schritt 2: Klicken Sie auf Anpassen neben dem Design, das Sie bearbeiten möchten.

Schritt 3:: Drücke den Einstellungen (Zahnradsymbol) und dann wählen Farbe.

Schritt 4: Der Schemesauf das Schema, das Sie bearbeiten möchten.

Schritt 5: Wählen Sie den Farbverlauf aus, den Sie ändern möchten.

Schritt 6: Klicken Sie auf den Pfeil neben GradientUnd wählen Sie dann CSS.

Schritt 7: Fügen Sie Ihren CSS-Code für den Farbverlauf in das Eingabefeld ein. 

Schritt 8: Klicken Sie auf Gespeichert.

Das Ergebnis sehen Sie in der Vorschau des Theme-Editors. Dieser Ansatz eignet sich gut für Überschriften, Banner und sogar ganze Abschnitte..

So fügen Sie in GemPages einen CSS-Farbverlaufshintergrund hinzu

GemPages bietet native Unterstützung für die Hintergrundanpassung, einschließlich statischer Farben, Verläufe und Bilder. Wenn Sie jedoch mehr Kontrolle wünschen, verwenden Sie Benutzerdefinierte CSS, hier ist wie:

Schritt 1: Klicken Sie mit der rechten Maustaste in dem Abschnitt, auf den Sie einen Farbverlauf anwenden möchten.

Schritt 2: Auswählen Benutzerdefinierter Code im Kontextmenü.

Schritt 3: Geben Sie im angezeigten CSS-Fenster Ihren benutzerdefinierten CSS-Code ein. Beispiel:

.gdXweR3hSd {

  Hintergrund: linearer Farbverlauf (135 Grad, #f6d365, #fda085) !wichtig;

}

Erläuterung:

.gdXweR3hSd

• This is a CSS-Klassenselektor.
• Es zielt auf jedes Element auf Ihrer Seite ab, das den Klassennamen hat .gdXweR3hSd

Hintergrund: linearer Farbverlauf (135 Grad, #f6d365, #fda085);

• Diese Zeile wendet eine Farbverlauf-Hintergrund zum ausgewählten Abschnitt.

Lassen Sie es uns weiter aufschlüsseln:

• Hintergrund: ist die CSS-Eigenschaft, mit der der Hintergrund eines Elements festgelegt wird.
• linearer Gradient(…) ist eine Funktion, die ein sanfter Übergang zwischen Farben.
• 135deg: Das bedeutet, dass der Gradient diagonal verläuft – von der von der oberen linken Ecke zur unteren rechten Ecke.
  • Sie können diesen Wert auf andere Winkel ändern, wie 90deg (von links nach rechts), 180deg (von oben nach unten) usw.
    
• #f6d365: Dies ist das Startfarbe des Gradienten.
• #fda085: Dies ist das Endfarbe des Gradienten.

Schritt 4: Klicken Sie auf Gespeichert.