CSS Visual Directory
Sunset Gradient
A warm orange-to-pink diagonal gradient.
Edit Sunset Gradient
Change any value to see it update live.
About this entry
What it is
A warm orange-to-pink diagonal gradient.
Hero sections, CTA buttons and app splash screens.
Copy & use
How to copy and use sunset 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
Hero sections, CTA buttons and app splash screens.
- 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
A two-stop linear gradient on the diagonal. Warm orange into pink is one of the few pairings that stays clean without a midpoint stop.
135deg- Direction. 135 degrees runs top-left to bottom-right.
#ff9a44- The first stop, at the start of that line.
#fc6076- The final stop.
Making it yours
How to adjust sunset gradient
Change the angle before changing the colours; the same pair reads very differently at 90 and 135 degrees. Adding a third stop in between is what fixes a gradient that looks muddy in the middle.
Worth knowing before you ship it
Browsers interpolate in sRGB, so two colours far apart on the wheel pass through a grey dead zone. Colours that are already close in hue avoid this entirely.
Common questions
Using sunset gradient
What is sunset gradient?
A warm orange-to-pink diagonal gradient. Hero sections, CTA buttons and app splash screens.
Where do I put the sunset gradient CSS?
Paste the declaration inside the rule for the element you are styling — a class, an id or a component's scoped stylesheet. Hero sections, CTA buttons and app splash screens. 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 sunset 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 sunset 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