Colours in this gradient

• #fecdd3
• #bfdbfe
• #fde68a
• #ffffff

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.

Create a full-screen mesh CSS gradient background called "Coral Reef".

Requirements:
- A single div that fills the viewport (min-height: 100vh).
- Use this exact background value:
  radial-gradient(at 0% 0%, #fecdd3 0px, transparent 55%), radial-gradient(at 100% 0%, #bfdbfe 0px, transparent 55%), radial-gradient(at 50% 100%, #fde68a 0px, transparent 55%), #ffffff
- Colours used: #fecdd3, #bfdbfe, #fde68a, #ffffff.
- 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-coral-reef) I can reuse.

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

How to build it, step by step

1. 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. 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. 3

   Add the colour stops: #fecdd3 → #bfdbfe → #fde68a → #ffffff. Where no position is given, the browser spaces the stops evenly.

4. 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 dark navy or near-black text on this gradient.
• Add a subtle noise texture on top (see the Film Grain background) to remove visible colour banding on large screens.

More gradients