Animated Oceanic Abyss Gradient

Colours in this gradient

• #030712
• #0c4a6e
• #0284c7
• #0369a1

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 animated linear CSS gradient background called "Animated Oceanic Abyss".

Requirements:
- A single div that fills the viewport (min-height: 100vh).
- Use this exact background value:
  linear-gradient(135deg, #030712, #0c4a6e, #0284c7, #0369a1, #030712)
- Colours used: #030712, #0c4a6e, #0284c7, #0369a1.
- Set background-size to 400% 400% and animate background-position from 0% 50% to 100% 50% and back over 14 seconds (ease, infinite) so the colours appear to flow.
- Disable the animation when the user has prefers-reduced-motion set.
- 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-animated-oceanic-abyss) 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

   Use linear-gradient(). The first value is the direction (an angle such as 135deg, or a keyword such as 'to top'); the rest are colour stops with optional positions.

3. 3

   Add the colour stops: #030712 → #0c4a6e → #0284c7 → #0369a1. Where no position is given, the browser spaces the stops evenly.

4. 4

   Make the background larger than the element with background-size: 400% 400%, so only part of the gradient is visible at once.

5. 5

   Animate background-position between the two ends. Moving a large gradient is how you get a flowing effect, because gradients themselves cannot be transitioned.

6. 6

   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.

More gradients