Comment utiliser les dégradés CSS pour les arrière-plans dans Shopify et GemPages

Qu'est-ce qu'un dégradé CSS ?

A Dégradé CSS Il s'agit d'un style d'arrière-plan qui permet de passer d'une couleur à l'autre ou à plusieurs. Contrairement aux images traditionnelles, les dégradés sont créés avec du code, ce qui les rend évolutifs, légers et facilement personnalisables.

Il existe trois principaux types de dégradés CSS :

• Gradients linéaires:Transition des couleurs le long d'une ligne droite (par exemple, de haut en bas ou de gauche à droite).
  Exemple : dégradé linéaire (rouge, vert)
• Dégradés radiaux:Les couleurs rayonnent vers l'extérieur à partir d'un point central.
  Exemple : radial-gradient(cercle, bleu, blanc)
• Gradients coniques:Les couleurs tournent autour d'un point central comme un graphique à secteurs.
  Exemple : gradient conique (à partir de 90 degrés, rouge, jaune, vert)

Générateurs de dégradés CSS recommandés

Ces outils gratuits facilitent la tâche :

• Dégradé CSS – Interface conviviale pour les dégradés linéaires et radiaux
• uiGradients– De superbes préréglages prêts à l’emploi
• Générateur de gradients Coolors – Idéal pour les palettes de marques
• Chasse au dégradé – Dégradés sélectionnés par la communauté

Ces générateurs offrent des aperçus visuels et vous permettent de copier le CSS en un seul clic.

Comment configurer un arrière-plan dégradé dans Shopify

Les thèmes Shopify vous permettent désormais d'ajouter des dégradés directement depuis le Éditeur de thèmeVoici comment procéder en utilisant du CSS personnalisé :

Étape 1 : Allez dans Boutique en ligne > Thèmes dans votre interface administrateur Shopify.

Étape 2 : Cliquez à nouveau sur Personnaliser à côté du thème que vous souhaitez modifier.

Étape 3: Clique le Paramètres (icône d'engrenage) puis choisissez Couleur.

Étape 4 : Sous schémas, cliquez sur le schéma que vous souhaitez modifier.

Étape 5 : Sélectionnez le dégradé que vous souhaitez modifier.

Étape 6 : Cliquez sur la flèche à côté de Couleur dégradée, Puis sélectionnez CSS.

Étape 7 : Collez votre code CSS dégradé dans le champ de saisie. 

Étape 8 : Cliquez à nouveau sur Enregistrer.

Vous verrez le résultat dans l'aperçu de l'éditeur de thème. Cette approche fonctionne parfaitement pour les en-têtes, les bannières et même des sections entières..

Comment ajouter un arrière-plan dégradé CSS dans GemPages

GemPages offre un support natif pour la personnalisation de l'arrière-plan, notamment les couleurs statiques, les dégradés et les images. Si vous souhaitez davantage de contrôle, utilisez CSS personnalisé, Voici comment:

Étape 1: clic droit sur la section où vous souhaitez appliquer un dégradé.

Étape 2 : Choisir Code personnalisé dans le menu contextuel.

Étape 3 : Dans la fenêtre CSS qui s'affiche, saisissez votre code CSS personnalisé. Exemple :

.gdXweR3hSd {

  arrière-plan : dégradé linéaire (135 degrés, #f6d365, #fda085) !important ;

}

Explication:

.gdXweR3hSd

• Il s'agit d'un Sélecteur de classe CSS.
• Il cible tout élément de votre page portant le nom de classe .gdXweR3hSd

arrière-plan : dégradé linéaire (135 degrés, #f6d365, #fda085) ;

• Cette ligne applique une fond dégradé à la section sélectionnée.

Décomposons-le davantage :

• fond: est la propriété CSS utilisée pour définir l'arrière-plan d'un élément.
• gradient linéaire(…) est une fonction qui crée un transition douce entre les couleurs.
• 135deg: Cela signifie que le gradient s'écoulera en diagonale, à partir du du coin supérieur gauche au coin inférieur droit.
  • Vous pouvez modifier cette valeur pour d'autres angles comme 90deg (de gauche à droite), 180deg (de haut en bas), etc.
    
• #f6d365: C'est le couleur de départ du gradient.
• #fda085: C'est le couleur finale du gradient.

Étape 4 : Cliquez à nouveau sur Enregistrer.