Sea Glass Gradient: CSS Code & Colors

Q: What's the CSS code for the Sea Glass gradient?

Use background: radial-gradient(at left center, #E0F7FA 0%, #80DEEA 50%, #00695C 100%);. RGBA and HSLA versions are also available on this page.

Sea Glass Gradient

Pale aqua deepening into teal.

Customize this gradient →

Opens it in the generator: change the type or direction, adjust the colors, then copy the CSS or download.

Color Stops

#E0F7FA

#80DEEA

#00695C

Sea Glass CSS Code

background: #E0F7FA;
background: radial-gradient(at left center, #E0F7FA 0%, #80DEEA 50%, #00695C 100%);

background: rgba(224, 247, 250, 1.0);
background: radial-gradient(at left center, rgba(224, 247, 250, 1.0) 0%, rgba(128, 222, 234, 1.0) 50%, rgba(0, 105, 92, 1.0) 100%);

background: hsla(187, 72%, 93%, 1.0);
background: radial-gradient(at left center, hsla(187, 72%, 93%, 1.0) 0%, hsla(187, 72%, 71%, 1.0) 50%, hsla(173, 100%, 21%, 1.0) 100%);

background: #E0F7FA;
background: radial-gradient(at left center, #E0F7FA 0%, #80DEEA 50%, #00695C 100%);
background: radial-gradient(at left center in oklch, oklch(96.02% 0.0244 206.2) 0%, oklch(84.67% 0.0909 206.2) 50%, oklch(46.68% 0.0845 180.4) 100%);

The same colors blended in OKLCH, so this one looks more vivid than the gradient above. Older browsers show the standard gradient. How OKLCH gradients work →

bg-radial-[at_left_center_in_srgb] from-[#E0F7FA] from-0% via-[#80DEEA] via-50% to-[#00695C] to-100%

bg-[radial-gradient(at_left_center,#E0F7FA_0%,#80DEEA_50%,#00695C_100%)]

Try it as

Similar Gradients

More Gradient Presets

FAQ

What is the Sea Glass gradient?