Free Gradient

Aurora Mesh Gradient

Four soft radial glows layered over near-black create the mesh-gradient look used on AI and SaaS landing pages. Copy the CSS below or use the AI prompt to generate variations.

dark
mesh
radial
ai
saas

Colours in this gradient

#5b21b6
#0ea5e9
#10b981
#020617

background: radial-gradient(at 20% 20%, #5b21b6 0px, transparent 50%), radial-gradient(at 80% 10%, #0ea5e9 0px, transparent 50%), radial-gradient(at 70% 80%, #10b981 0px, transparent 50%), radial-gradient(at 10% 90%, #1d4ed8 0px, transparent 50%), #020617;

The code

Plain HTML and CSS with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="gradient"></div>

The AI prompt

Paste this into an AI coding tool to generate the same gradient, then ask it to adapt the colours, text or framework to your project.

Works with Claude · ChatGPT · Cursor · v0 · Bolt · Gemini

Create a full-screen mesh CSS gradient background called "Aurora Mesh".

Requirements:
- A single div that fills the viewport (min-height: 100vh).
- Use this exact background value:
  radial-gradient(at 20% 20%, #5b21b6 0px, transparent 50%), radial-gradient(at 80% 10%, #0ea5e9 0px, transparent 50%), radial-gradient(at 70% 80%, #10b981 0px, transparent 50%), radial-gradient(at 10% 90%, #1d4ed8 0px, transparent 50%), #020617
- Colours used: #5b21b6, #0ea5e9, #10b981, #020617.
- No images and no JavaScript.
- Also give me the same gradient as a Tailwind CSS arbitrary value class and as a CSS custom property (--gradient-aurora-mesh) I can reuse.

Return one HTML file with the CSS in a <style> tag.

How to build it, step by step

1
Create an element to hold the gradient and give it a size. A gradient is a background image, so an element with no height shows nothing.
2
Layer several radial-gradient() values in one background, separated by commas. Each one is a soft coloured glow at a different corner that fades to transparent, with a solid base colour last.
3
Add the colour stops: #5b21b6 → #0ea5e9 → #10b981 → #020617. Where no position is given, the browser spaces the stops evenly.
4
Check text contrast. Place your real heading on top and make sure it stays readable across the whole gradient, not just in one corner.

Customisation tips

Store the gradient in a CSS custom property so every section uses the same value.
Use white or very light text on this gradient.
Add a subtle noise texture on top (see the Film Grain background) to remove visible colour banding on large screens.