Ocean Mesh
Pale cyan and white melted into a soft mesh, deeper blue in the corners, for social graphics.
CSS
background: radial-gradient(circle at 30% 20%, #48CAE4 0%, #0096C7 33%, #90E0EF 67%, #00B4D8 100%);Mesh and animated state live in the studio. This page shows a CSS fallback from the palette.
What is the Ocean Mesh gradient?
Pale cyan and white melted into a soft mesh, deeper blue in the corners, for social graphics.
How to use Ocean Mesh
Customize this gradient in the studio, copy the CSS on this page, or download a marked 1920px PNG. 4K and SVG stay on Pro.
Related gradients
Sunrise BandsOrange at the core, then coral, then blue rings out to white, banded for a landing hero.
Arctic DepthPale ice blue sinking into navy, with grain and slow motion for launch pages that want to look cold and expensive.
Soft BlushBlush and peach running into a cool blue, soft enough to sit behind slides or a landing section.
Cosmic DriftPlum pooled at the bottom, lifting through dusty blue into mint at the edges, dark enough to sit behind a whole page.
Canyon SunriseA hot magenta core fading to black at the edges, with a fine dot grid, for a launch hero that only needs one color.
Purple CheckerViolet checker, brightest along the bottom edge and black in the top corner, for a social graphic.
VolcanicOrange and a streak of red coming out of black in one corner, loud on purpose, for thumbnails.
Signature NoiseSlate blue, mauve, and coral under heavy grain, a bright spot in the middle, for a landing page or a wallpaper.
Caustics DepthNear-black water with faint pale streaks, for a background that stays behind the type.
Amber MeshGold light pooled on dark navy, grain across the field, for a page that wants warmth without leaving black.
Ember BloomBurnt orange around a pale cream streak, grain over the mesh, for a warm hero.
Rose LayoutHot pink on one side easing to pale rose on the other, flat and even, for an editorial page.
Updated October 2026
