Dark gradient announcement bar with colour sweep gradient text on black background
Announcement bar template for AI product and SaaS landing pages with a black background, a coloured gradient sweep from white to green to gold to coral to pink on a pill-shaped bar, and a bold headline with a read more link. Paste into Bolt, Claude Code, Replit, or Lovable.
About this vibe coding template
A compact announcement bar section on a near-black #0a0a0a background. A single horizontal bar with a five-stop colour gradient sweeps from white on the left through sage green, warm gold, coral orange, and soft pink on the right. The bar holds a bold announcement headline and a plain underline read more link. The bar is full-width within the section padding with rounded corners and comfortable padding. The black outer background and the coloured gradient bar together create a high-contrast announcement moment suited to the top or bottom of a page. Use this template to surface funding news, product launches, or feature releases without taking over the full hero section.
Common questions about this template
How do I change the gradient colours on the bar?
Ask your vibe coding tool to update the background gradient on .bar. The default five stops are white, #9be084 (sage green), #f4cf6a (warm gold), #f19a7a (coral orange), and #f18ac2 (soft pink). Replace any stop with your brand colour. Keep the white left stop to contrast against the black background.
How do I change the announcement text?
Ask Bolt, Claude Code, Replit, or Lovable to update the text inside the .bar span. Bold the key phrase with a b element. The default wraps the company name and news stage in b. Keep the announcement to one line so the bar stays at single-row height on desktop.
How do I change the read more link?
Ask your vibe coding tool to add an href attribute to the a element inside .bar. The default anchor has no href. Wire it to your press page, blog post, or announcement landing page. The link inherits the dark text colour from .bar and shows an underline on hover.
Use this AI coding template for
- ·Funding announcement and product launch bars at the top of AI product and SaaS landing pages
- ·Feature release and beta launch announcements on voice AI and business AI product pages that need a subtle but eye-catching coloured bar
- ·Dark landing pages where an announcement needs to stand out on a black or dark background without disrupting the main content hierarchy