Dark Gradient Background

Dark gradient backgrounds with glowing colour on black and navy. Pick a style, preview it live and download a PNG, video or embed code.

Hero curve · Midnight1920 × 1080
Made for: landing page heroes, full width

Dark Gradient Background examples

Midnight glow gradient background, corner shape
Glow gradient: Corner, Midnight
Tangerine gradient sphere background, frosted shape
Gradient sphere: Frosted, Tangerine
Night watercolor gradient background, apricot shape
Watercolor gradient: Apricot, Night
Midnight glow gradient background, low corner shape
Glow gradient: Low corner, Midnight
Night watercolor gradient background, sky shape
Watercolor gradient: Sky, Night
Midnight glow gradient background, card face shape
Glow gradient: Card face, Midnight
Midnight glow gradient background, low band shape
Glow gradient: Low band, Midnight

Templates with this gradient

Dark gradient hero template for AI SaaS previewDark gradient hero template for AI SaaSGlowing glass orb animation for dark websites previewGlowing glass orb animation for dark websitesAI SaaS thinking orb hero section template previewAI SaaS thinking orb hero section templateAnimated conic gradient background for SaaS previewAnimated conic gradient background for SaaSAudio waveform hero background for AI SaaS sites previewAudio waveform hero background for AI SaaS sites

Gradient backgrounds by colour

PurplePinkBlueOrangeGreenDarkPastelRainbow

Other animated gradient styles

Stripe Gradient Background previewStripe Gradient BackgroundGlow Gradient Background previewGlow Gradient BackgroundAI Orb Animation previewAI Orb AnimationWave Gradient Background previewWave Gradient BackgroundSilk Gradient Background previewSilk Gradient BackgroundGradient Sphere previewGradient SphereBloom Gradient previewBloom GradientWatercolor Gradient Background previewWatercolor Gradient BackgroundRibbon Gradient Background previewRibbon Gradient BackgroundLiquid Gradient Background previewLiquid Gradient Background

A dark gradient background puts glowing colour on black or deep navy. It is the standard look for dark mode websites, developer tools and AI products, because the colour glows and text stays easy to read. These dark gradients include glowing orbs, light rays, sound waves and colour on navy mesh, and they all move.

Dark Gradient Background example: an animated gradient made with the BrowserMoon generator
Dark Gradient Background: example

Show it off: put your gradient on a 3D laptop mockup

Where to use it

Dark mode websites

A glow on black gives a dark hero colour without hurting contrast for white text.

Developer and AI tools

Orbs and waves on dark grounds suit assistants, APIs and data products.

Keynote and launch slides

Dark gradients make bright product shots and white type stand out.

How to make an animated gradient background

  1. Pick a shape or style.
  2. Pick your colours.
  3. Set the speed, flow and grain until it feels right.
  4. Pick a size: hero, square, social post, story, banner or card.
  5. Download a PNG or video loop, or copy the embed code into your site, Framer, Webflow, Bolt, Lovable or Claude Code.

Glow on dark

Midnight puts a bright glow on a dark ground, Ink puts pink and cyan on navy, and the AI orb and wave colour sets draw light on black.

Frequently asked questions

What is a dark gradient background?

A dark gradient background is a background where dark 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 is a good dark gradient for a website?

Deep navy or near black with one colour glowing in a corner or behind the headline. Keep most of the area dark so text stays readable.

Should a dark background be pure black?

Usually not. A very dark navy or charcoal with a soft gradient looks richer and is easier on the eyes than pure black.

How do I make a dark gradient background?

Pick a style above, choose one of the dark 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.

Narrow it down

All animated gradientsStripe gradientGlow gradientAI orbWave gradientSilk gradientGradient sphereBloom gradientWatercolor gradientRibbon gradientLiquid gradientMesh Gradient GeneratorGrainy Gradient GeneratorGradient Wallpaper MakerPurple Gradient BackgroundPink Gradient BackgroundBlue Gradient BackgroundOrange Gradient BackgroundGreen Gradient BackgroundPastel Gradient BackgroundRainbow Gradient BackgroundAnimated gradient section templatesGradient orb templatesProduct launch video templatesFree app icon and favicon generatorFree 3D laptop mockup generatorAnimated gradient hero templatesHero section templatesSaaS landing page templatesPricing page templatesLanding page templatesAI app templates

Works with any vibe coding tool

LovableBoltReplitClaude CodeChatGPT CodexCursorFramerv0WindsurfGitHub CopilotGemini CLIGoogle AntigravityGoogle StitchKiroCline
What is vibe coding?SaaS templatesSaaS landing page templates

Stripe-style describes the look. BrowserMoon is not affiliated with Stripe.