Free Gradient

Cosmic Nebula Gradient

Four vivid starlight glows over deep void black, delivering an interstellar nebula look for generative AI heroes. Copy the CSS below or use the AI prompt to generate variations.

dark
mesh
radial
cosmic
ai

Colours in this gradient

#6366f1
#ec4899
#f59e0b
#06b6d4
#05060f

background: radial-gradient(at 15% 25%, #6366f1 0px, transparent 55%), radial-gradient(at 85% 15%, #ec4899 0px, transparent 50%), radial-gradient(at 75% 85%, #f59e0b 0px, transparent 50%), radial-gradient(at 20% 80%, #06b6d4 0px, transparent 50%), #05060f;

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 "Cosmic Nebula".

Requirements:
- A single div that fills the viewport (min-height: 100vh).
- Use this exact background value:
  radial-gradient(at 15% 25%, #6366f1 0px, transparent 55%), radial-gradient(at 85% 15%, #ec4899 0px, transparent 50%), radial-gradient(at 75% 85%, #f59e0b 0px, transparent 50%), radial-gradient(at 20% 80%, #06b6d4 0px, transparent 50%), #05060f
- Colours used: #6366f1, #ec4899, #f59e0b, #06b6d4, #05060f.
- 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-cosmic-nebula) 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: #6366f1 → #ec4899 → #f59e0b → #06b6d4 → #05060f. 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.