ocean maritime gradient depth water sea blue Maritime or nautical themed hero backgrounds Underwater or diving website sections Nature and ocean conservation landing pages Flat single-color backgrounds on water-themed sites Need realistic ocean depth gradient
Ocean Depth
Fetch snippet JSON:
curl https://webspire.de/snippets/atmosphere/ocean-depth.json Atmosphere
Atmospheric backdrop
Background
Customize
Quick Start
<section class="ocean-depth text-white py-24">Ocean content</section>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- Features
- Dark Mode Responsive
- A11y
- prefers-reduced-motion, prefers-color-scheme
- Size
- 1382 bytes · 53 lines
- Custom Properties
-
--ocean-surface--ocean-mid--ocean-deep--ocean-light--shimmer-speed - Classes
-
.ocean-depth.ocean-depth-shimmer - Variants
- ocean-depth-shimmer
ocean maritime gradient depth water sea blue
Multi-layer ocean gradient simulating water depth — bright surface caustics at top transitioning to deep blue at bottom. Two variants: .ocean-depth is static, .ocean-depth-shimmer adds a slow vertical movement animation simulating light playing through water.