# Blue Gradient Background

Blue gradient backgrounds from sky blue to deep navy. Pick a style, preview it live and download a PNG, video or embed code.

Page: https://www.browsermoon.com/blue-gradient-background (live animated gradient generator, runs in the browser)

Blue is the colour people trust most, which is why banks, SaaS products and developer tools use it so often. A blue gradient keeps that calm, reliable feel but adds depth and movement. These blue gradient backgrounds go from light sky blue and teal to deep navy, in mesh, glow, wave and silk styles.

## How it works

1. Pick a shape or style.
2. Pick a colour set.
3. Set speed, flow and grain.
4. Pick a size: hero 16:9, square, post 4:5, story 9:16, banner 3:1 or card.
5. Download a PNG or a video loop, or copy the embed code (one HTML block with a small WebGL script) into a website, Framer, Webflow or an AI coding tool.

Previewing is free. Downloads and embed code come with a BrowserMoon licence and have no watermark.

## Where to use it

- **SaaS and fintech websites:** A calm blue mesh behind the hero says reliable and modern at the same time.
- **Developer tools:** Deep navy with electric blue glows suits dark developer and data products.
- **Health and productivity apps:** Light sky and teal gradients feel clean and calm behind an app screen.

## Sky, teal and navy

Lagoon is teal and blue, Ocean runs from teal to violet, and the wave and orb colour sets add electric blue on dark grounds.

## Frequently asked questions

### What is a blue gradient background?

A blue gradient background is a background where blue tones blend smoothly into each other, often with a second colour mixed in. It adds colour and depth to a page without a photo.

### What colours go well with a blue gradient?

Teal and green make it fresh, purple makes it richer and more creative, and a touch of orange gives strong contrast for buttons.

### Why do tech companies use blue gradients?

Blue reads as trustworthy and calm, which matters for products that handle money, data or health. A gradient adds the modern feel a flat blue lacks.

### How do I make a blue gradient background?

Pick a style above, choose one of the blue colour sets, and set the speed and grain. Then download a PNG or video, or copy the embed code into your website.

### How do I add it to my website?

Copy the embed code and paste it where the background should go. It is one HTML block with a small script and works in plain HTML, Framer, Webflow, WordPress and code from Bolt, Lovable, Cursor or Claude Code. You can also download a PNG or a video loop and use it as a background image or video.

### Is it free?

You can make and preview every gradient for free in your browser, with no sign up. PNG, video and embed code downloads come with a BrowserMoon licence, and licensed files have no watermark.

## Other gradient pages

- [Stripe Gradient Background](https://www.browsermoon.com/stripe-gradient)
- [Glow Gradient Background](https://www.browsermoon.com/glow-gradient)
- [AI Orb Animation](https://www.browsermoon.com/ai-orb)
- [Wave Gradient Background](https://www.browsermoon.com/wave-gradient)
- [Silk Gradient Background](https://www.browsermoon.com/silk-gradient)
- [Gradient Sphere](https://www.browsermoon.com/gradient-sphere)
- [Bloom Gradient](https://www.browsermoon.com/bloom-gradient)
- [Watercolor Gradient Background](https://www.browsermoon.com/watercolor-gradient)
- [Ribbon Gradient Background](https://www.browsermoon.com/ribbon-gradient)
- [Liquid Gradient Background](https://www.browsermoon.com/liquid-gradient)
- [Mesh Gradient Generator](https://www.browsermoon.com/mesh-gradient)
- [Grainy Gradient Generator](https://www.browsermoon.com/grainy-gradient)
- [Gradient Wallpaper Maker](https://www.browsermoon.com/gradient-wallpaper)
- [Purple Gradient Background](https://www.browsermoon.com/purple-gradient-background)
- [Pink Gradient Background](https://www.browsermoon.com/pink-gradient-background)
- [Orange Gradient Background](https://www.browsermoon.com/orange-gradient-background)
- [Green Gradient Background](https://www.browsermoon.com/green-gradient-background)
- [Dark Gradient Background](https://www.browsermoon.com/dark-gradient-background)
- [Pastel Gradient Background](https://www.browsermoon.com/pastel-gradient-background)
- [Rainbow Gradient Background](https://www.browsermoon.com/rainbow-gradient-background)

---
BrowserMoon (https://www.browsermoon.com) is a library of 570+ website templates and mobile app screens for people building with AI coding tools (Claude Code, Lovable, Bolt, Replit, Cursor, ChatGPT Codex). Each template is one HTML file you paste into the tool as the reference design. One licence is $349, one time, for unlimited projects. The mockup and gradient generators are free to use in the browser.