CSS Visual Directory
Ocean Gradient
A cool blue gradient from deep to light.
Edit Ocean Gradient
Change any value to see it update live.
About this entry
What it is
A cool blue gradient from deep to light.
Tech landing pages and calm headers.
Copy & use
How to copy and use ocean gradient
- 01
Copy the complete value
Use the copy button above so the value is captured without its label, description or surrounding page text.
- 02
Paste it where you need it
Tech landing pages and calm headers.
- 03
Check the final result
Current browsers support the properties used here, but stacking contexts, background colours and inherited styles affect the result. Test snippets in the real component instead of judging them only in isolation.
Value by value
What each part of this rule does
The same diagonal structure in cool blues. Both stops sit close together in hue, which is why the blend stays clean the whole way across.
135deg- Direction of the blend.
#2193b0- The deeper teal at the start.
#6dd5ed- The pale blue it resolves into.
Making it yours
How to adjust ocean gradient
Swap the stop order to reverse the light direction without touching the angle. For a header, a shallower angle such as 160deg keeps the darker colour along the top.
Worth knowing before you ship it
Pale end stops leave very little contrast for white text. Check the text against the lightest part of the gradient, not the average.
Common questions
Using ocean gradient
What is ocean gradient?
A cool blue gradient from deep to light. Tech landing pages and calm headers.
Where do I put the ocean gradient CSS?
Paste the declaration inside the rule for the element you are styling — a class, an id or a component's scoped stylesheet. Tech landing pages and calm headers. Change one value at a time so you can see what each part contributes, and check the cascade in case a more specific rule already sets the same property.
Will ocean gradient work everywhere?
Current browsers support the properties used here, but stacking contexts, background colours and inherited styles affect the result. Test snippets in the real component instead of judging them only in isolation.
Can I customise ocean gradient after copying?
Paste the declaration into the selector for the element you want to style. Adjust one value at a time and check the cascade so an existing rule does not unexpectedly override the effect.
Also known as
Keep browsing