Orange gradient: CSS code and backgrounds to download
This orange gradient runs from a light apricot (#FFB347) through pumpkin (#FF7518) to a deep burnt orange (#E8590C) at 135°. Copy the CSS, edit the stops, or download it as a PNG sized for your screen. Black text stays readable across the whole gradient; white does not.
background-color: #ffb347;
background-image: linear-gradient(135deg, #ffb347 0%, #ff7518 50%, #e8590c 100%);Variations
Reversed
#E8590C → #FF7518 → #FFB347Softer
#FFCE87 → #FFA569 → #F09361Deeper
#A6742E → #A64C10 → #973A08Radial glow
#FFB347 → #FF7518 → #E8590C
On this page
Orange gradients feel warm and energetic, which is why they turn up on sale banners, fitness apps, autumn invitations and sunset-themed phone wallpapers. This one uses three stops so the middle doesn't go flat: a light apricot (#FFB347) that sits close to CSS orange, a pumpkin orange (#FF7518), and a deep burnt orange (#E8590C) close to CSS chocolate and orangered.
How the gradient is built
The editor above writes the gradient the way CSS does: linear-gradient(135deg, #ffb347 0%, #ff7518 50%, #e8590c 100%). An angle of 135° runs from the top-left corner to the bottom-right, so the light end sits where people start reading. With two stops instead of three, the browser blends straight from apricot to burnt orange, and the halfway color would be #F4862A, a little duller than the pumpkin stop. That is why a middle stop is worth adding to most two-color oranges.
The code also sets background-color to the first stop. Older email clients and some print-to-PDF tools ignore gradients, and the plain color stops the text from landing on white.
Text on an orange gradient
Orange is a mid-light color, so white text struggles on it. Measured against each stop, white reaches only 1.78:1 on the apricot and 3.58:1 on the burnt orange, so white fails the 4.5:1 level for normal text everywhere on this gradient. Black text measures 11.79:1, 7.80:1 and 5.86:1 at the three stops and passes AA all the way across. If your design needs white text, use the Deeper variation, add a dark overlay behind the words, or move the text onto a solid panel.
Worked example
You need a Facebook event cover for a pumpkin-carving night. Choose Banner 1500 × 500 under Download size; facebook resizes covers, but a wide image keeps the gradient smooth. Set the angle to 90° so the gradient runs left to right behind a single line of text, then press Download PNG. In your design app, put the event title in black or very dark brown on the left, where the apricot end gives the best contrast, and keep the date and time in the same dark color. If the cover looks too bright next to your photos, try the Softer variation, which mixes each stop 35% toward white.
More orange ideas
The variations strip gives a reversed version (dark corner first), a softer peach gradient, a deeper rust gradient and a radial glow that looks like a low sun. For a full sunset with pink and violet, see the sunset gradients, or use the gradient generator to start from your own colors.