20 Of Our Favorite 🤩
Subtle Gradient Backgrounds

Gradient backgrounds can grab attention on your sales page with a touch of visual intrigue, while subtly reinforcing your brand identity leading to a more engaging and memorable experience for potential customers.

LEARN HOW (FREE)

Wispy Lavender

This subtle two-tone gradient blends light periwinkle with a touch of lavender, creating a soft and airy background.

In any Site Page Templates section, just change the background to Custom Gradient and then copy and paste this:

background-color: transparent;
background-image: linear-gradient(180deg, #DFFCFF 0%, #E3D9FD 100%);

Multi-tone Rose

This option adds a touch more depth by using three shades of rose that transition smoothly.

In any Site Page Templates section, just change the background to Custom Gradient and then copy and paste this:


background-color: transparent;
background-image: linear-gradient(180deg, #FBEBEB 0%, #FCE0D9 40%, #FFE0D9 70%, #F7D7F0 100%);

Golden Hour

This option uses a light cream base with a hint of soft peach and yellow, creating a subtle and elegant gradient reminiscent of a golden sunset.

In any Site Page Templates section, just change the background to Custom Gradient and then copy and paste this:


background-color: transparent;
background-image: linear-gradient(180deg, #FFF8F5 0%, #FCE4EC 20%, #FBEBEB 50%, #FFE0D9 80%, #FFF8F5 100%);

Ocean Breeze

This variation uses a more vibrant turquoise for the base that transitions to a light sky blue, creating a refreshing and breezy feel

In any Site Page Templates section, just change the background to Custom Gradient and then copy and paste this:


background-color: transparent;
background-image: linear-gradient(180deg, #D2EAFE 0%, #E0F2FF 50%, #EBF5F8 100%);

Honeycomb Delight

This variation uses a warmer yellow base that transitions to a soft gold, then back to a lighter yellow for a more delightful and sunny feel.

In any Site Page Templates section, just change the background to Custom Gradient and then copy and paste this:


background-color: transparent;
background-image: linear-gradient(180deg, #FFE5D9 0%, #FFD7C9 30%, #FFE0D9 70%, #FFF0E5 100%);

Wisteria Twilight

This option uses a more prominent lavender base that transitions to a lighter periwinkle, then back to a lavender with a hint of purple for a more dramatic and elegant look.

In any Site Page Templates section, just change the background to Custom Gradient and then copy and paste this:


background-color: transparent;
background-image: linear-gradient(180deg, #D9C2F0 0%, #E0D2F5 40%, #D9C2F0 80%, #D6C0EE 100%);

Icy Mint

This variation uses a cooler and brighter mint green for the base that transitions to a light sky blue, creating a crisp and refreshing feel.

In any Site Page Templates section, just change the background to Custom Gradient and then copy and paste this:


background-color: transparent;
background-image: linear-gradient(180deg, #D2F3FE 0%, #E2F7FF 50%, #EAF0F4 100%);

Sunset Lagoon

This option blends a vibrant coral with a soft peach, transitioning to a cool sky blue for a dramatic sunset over a tropical lagoon.

In any Site Page Templates section, just change the background to Custom Gradient and then copy and paste this:


background-color: transparent;
background-image: linear-gradient(180deg, #F7CAC9 0%, #FFD2B9 40%, #FCE4EC 70%, #D2EAFE 100%);

Fuchsia Fantasy

This variation uses a bold fuchsia as the base, transitioning to a soft rose and then to a cool periwinkle, creating a dramatic and playful contrast.

In any Site Page Templates section, just change the background to Custom Gradient and then copy and paste this:


background-color: transparent;
background-image: linear-gradient(180deg, #F7C2D2 0%, #FEC2D9 40%, #FCE4EC 70%, #E0D2F5 100%);

Golden Twilight

This option uses a rich gold as the base, transitioning to an even bolder golden yellow, then softening to a light rose and finally ending in a cool sky blue for a dramatic interplay of warm and cool tones.

In any Site Page Templates section, just change the background to Custom Gradient and then copy and paste this:


background-color: transparent;
background-image: linear-gradient(180deg, #FFD7C9 0%, #FFD0B3 30%, #FFE0D9 60%, #FCE4EC 90%, #D2EAFE 100%);

Amethyst Night

This variation features a deep amethyst base that transitions to a lighter periwinkle, then back to a richer amethyst with a hint of purple for a truly dramatic and sophisticated night sky effect.

In any Site Page Templates section, just change the background to Custom Gradient and then copy and paste this:


background-color: transparent;
background-image: linear-gradient(180deg, #D6C0EE 0%, #E0D2F5 40%, #D9C2F0 70%, #C2A9F5 100%);

Emerald Oasis

This option utilizes a deep emerald green for the base, transitioning to a vibrant turquoise and then softening to a light sky blue for a dramatic and refreshing oasis feel.

In any Site Page Templates section, just change the background to Custom Gradient and then copy and paste this:


background-color: transparent;
background-image: linear-gradient(180deg, #A8E0C2 0%, #C2ECC5 40%, #D2F3FE 70%, #EAF0F4 100%);

Sun-kissed Sand

This variation uses a soft peach base that transitions diagonally to a warm golden yellow, creating a sun-drenched beach vibe.

In any Site Page Templates section, just change the background to Custom Gradient and then copy and paste this:


background-color: transparent;
background-image: linear-gradient(135deg, #FCE4EC 0%, #FFD7C9 50%, #FFE0D9 100%);

Plumeria Paradise

This option features a soft rose base that transitions diagonally to a bold fuchsia, then softens to a cool periwinkle, creating a dramatic and tropical floral effect.

In any Site Page Templates section, just change the background to Custom Gradient and then copy and paste this:


background-color: transparent;
background-image: linear-gradient(145deg, #FEC2D9 0%, #F7C2D2 40%, #E0D2F5 100%);

Lilac Twilight

Lilac Twilight uses a slightly diagonal transition, emphasizing the dramatic interplay between the deep amethyst and the lighter periwinkle tones.

In any Site Page Templates section, just change the background to Custom Gradient and then copy and paste this:


background-color: transparent;
background-image: linear-gradient(120deg, #D9C2F0 0%, #E0D2F5 40%, #D6C0EE 80%, #C2A9F5 100%);

Ocean Current

This option utilizes a cool sky blue base transitioning diagonally to a vibrant turquoise, creating a dynamic and refreshing ocean current effect.

In any Site Page Templates section, just change the background to Custom Gradient and then copy and paste this:


background-color: transparent;
background-image: linear-gradient(160deg, #D2EAFE 0%, #E0F2FF 40%, #EAF0F4 100%);

Emerald City

This uses a slightly diagonal transition, emphasizing the depth of the emerald green base as it transitions to the vibrant turquoise and cool sky blue.

In any Site Page Templates section, just change the background to Custom Gradient and then copy and paste this:


background-color: transparent;
background-image: linear-gradient(110deg, #A8E0C2 0%, #C2ECC5 40%, #D2F3FE 70%, #EAF0F4 100%);

Sunlit Citrus

This variation features a light cream base transitioning diagonally to a vibrant lemon yellow, then softening to a soft peach and back to the light cream. The contrasting yellow adds a dramatic pop of color.

In any Site Page Templates section, just change the background to Custom Gradient and then copy and paste this:


background-color: transparent;
background-image: linear-gradient(180deg, #FFF8F5 0%, #FFFAE7 40%, #FFFDCE 70%, #FFFAE7 100%);

Fairy Light Dream

This option utilizes a light lavender base transitioning diagonally through a series of very light pastel shades of blue, pink, and lavender, creating a whimsical and ethereal effect reminiscent of fairy lights.

In any Site Page Templates section, just change the background to Custom Gradient and then copy and paste this:


background-color: transparent;
background-image: linear-gradient(180deg, #F7F7FF 0%, #ECEFF1 30%, #F2F4F7 60%, #EAE6F1 90%, #F7F7FF 100%);

Rose Quartz Radiance

This variation offers a dramatic light color experience. It starts with a light cream base, transitions diagonally to a vibrant soft rose, then softens to a light rose with a hint of coral, and finally deepens to a more prominent rose for a radiant and dramatic effect.

In any Site Page Templates section, just change the background to Custom Gradient and then copy and paste this:


background-color: transparent;
background-image: linear-gradient(180deg, #FFF0E5 0%, #FFE0D9 40%, #FCE4EC 70%, #FEC2D9 100%);