Fonds la section [section A] dans la [section B] en dessous avec un dégradé doux. Aucune démarcation visible.
Want more control? See the expanded prompt ›
Sur la page d'accueil, fonds le fond de la section témoignages dans la section FAQ juste en dessous avec un dégradé linéaire doux — aucune démarcation visible.
- Dégradé doux entre les arrière-plans de deux sections adjacentes — aucune démarcation visible.
- CSS uniquement : quelques lignes de
linear-gradient, aucun JS, aucune requête supplémentaire. - Échantillonne automatiquement les couleurs des deux sections ; sélectionne les points d'arrêt intermédiaires.
- Fonctionne à chaque breakpoint et par-dessus des images via des overlays transparents.
Ce que vous essayez de faire
Une page qui empile des rectangles de couleurs différentes ressemble à une brochure. Fondre les arrière-plans là où les sections se rejoignent donne à la page l'aspect d'un design continu.
Points de vigilance
- Choix des couleurs : Fudge analyse les arrière-plans des deux sections et définit automatiquement les points d'arrêt intermédiaires.
- Mobile : le fondu fonctionne à chaque breakpoint car il s'agit d'un dégradé CSS et non d'une image.
- Variables de thème : si votre thème utilise des variables CSS pour les arrière-plans de section, Fudge les met à jour plutôt que de les écraser en inline.
Comment Fudge procède
Fudge duplique votre thème en ligne dans un brouillon, crée la section en tant que section Shopify modifiable avec l'emplacement et le comportement demandés dans votre prompt, et la connecte à vos vraies données produits et au style de votre marque. Tout commence en brouillon — prévisualisez sur votre boutique, ajustez via l'Éditeur de thème, et publiez uniquement quand vous êtes prêt. Votre boutique en ligne reste intacte.
Pourquoi les dégradés entre les sections adoucissent les longues pages
Les longues pages d’accueil avec plusieurs sections distinctes peuvent paraître saccadées — les changements brusques de fond entre les sections agressent l’œil. Une transition douce en dégradé fluidifie le passage d’une section à l’autre sans modifier le design de base de celles-ci.
Quand cela vaut la peine de le mettre en place
Créez des transitions en dégradé pour les longues pages d’accueil comportant de nombreuses sections. Évitez-les sur les pages courtes où les transitions sont déjà fluides.
Ce qui fait la différence
- Dégradé linéaire aux couleurs de la marque — calibré selon votre palette.
- Transition ciblée uniquement — ne modifie pas les styles des sections globalement.
- Aucune démarcation visible — c’est l’objectif.
Un petit détail qui donne l’impression qu’une longue page n’est qu’un seul design continu. Associez cela avec la section témoignage vidéo et le slider avant-après.
Fudge crée cela avec son éditeur de boutique.