Background styles let you control the visual appearance behind your announcement text. Instead of a plain single-color background, you can add gradients, stripes, animations, and other effects to make your bar stand out and match your brand.

Before choosing a background style, it helps to understand the three color fields available in the editor:

Each background style uses these color fields differently. You can switch between styles at any time and the preview updates immediately.

A single, flat background color. The entire bar is filled with your Background Color. This is the simplest and most readable option.

When to use: Clean, professional bars. When your message and colors speak for themselves. Works with any brand.

A linear gradient that blends from your Background Color on the left to your Secondary Color on the right. The transition is smooth and horizontal.

When to use: Modern, polished look. Great for sales and promotions where you want the bar to feel dynamic without animation.

A circular gradient that starts with the Secondary Color at the center and radiates outward to the Background Color at the edges. This creates a spotlight or glow effect behind your text.

When to use: Drawing attention to the center of the bar where your message sits. Works well with bold, short messages.

Diagonal repeating stripes at a 45-degree angle, alternating between the Background Color and Secondary Color. This creates a construction-tape or caution-stripe pattern.

When to use: Urgent messages, clearance sales, or limited-time offers. The stripes naturally convey “attention” and “action required.”

The bar is divided in half – the left side uses the Background Color and the right side uses the Secondary Color. A clean, hard divide with no blending.

When to use: Two-tone branding, contrast effects, or when you want a bold, graphic look that stands apart from typical announcement bars.

Works like the standard Gradient (left-to-right blend of Background Color and Secondary Color), but the gradient slowly shifts and animates. The background size is set to 400%, so the colors appear to move across the bar continuously.

When to use: Catching the eye on landing pages. Effective for major sales, product launches, or any time you want the bar itself to feel alive and moving.

Alternates between your Background Color and Secondary Color with a glowing box-shadow effect. The bar gently pulses, creating a breathing or heartbeat-like animation.

When to use: Time-sensitive messages where urgency matters. Countdown-adjacent promotions, last-chance sales, or any announcement that benefits from a sense of urgency.

Some background styles require more thought about color pairing than others:

You can change the background style at any time without affecting your message text, links, or other settings. If you switch from a two-color style back to Solid, the Secondary Color is simply ignored.

Do animated styles affect page speed? No. Animated Gradient and Pulse use CSS animations that run on the GPU. They do not add extra JavaScript or slow down your page.

Can I use background styles with countdown timers? Yes. All seven background styles work with every announcement type, including Countdown Timer.

Which background style works best on mobile? All styles render correctly on mobile devices. Solid and Gradient are the safest choices if you want maximum readability on small screens. Striped and Split may appear more compressed, so preview on a phone before publishing.