Question 1

How do I recreate a gradient I saw on a site?

Accepted Answer

Screenshot it, then pick the two end colors with the image color picker on this site. Sample the purest edges. Rebuild the gradient here with those two ends. If the middle looks muddy or gray compared to the original, add a third stop in the center and tune it by eye.

Question 2

Are gradients bad for text readability?

Accepted Answer

Only with big lightness swings. Place text over the calmest region of the gradient, then check the text color against both end colors in the contrast checker on this site. A gradient that runs from very dark to very light can dip close to the text color in the middle, so check the midpoint on those. If any point fails, darken that stop or add a scrim behind the text.

Question 3

What angle should I use for a hero background?

Accepted Answer

Top to bottom, 180 degrees, unless there is a reason to do otherwise. It reads the way light falls in a room and it survives the section getting taller on a phone. A diagonal at 135 degrees adds movement and suits a short banner, but the corner colors get cropped at odd screen widths, so preview it wide and narrow before shipping.

Question 4

Why does my gradient show faint stripes on some screens?

Accepted Answer

That is banding. Screens carry 256 steps per color channel, so a slow fade between two close colors runs out of in-between values and the steps show up as edges. Add a stop near the middle to shorten each blend, which usually clears it. A very faint noise texture laid over the gradient hides whatever is left.

Question 5

Should I use linear or radial?

Accepted Answer

Linear for anything spanning the full width of a section, since the color change follows a straight line and stays predictable behind text. Radial when one element should look lit from behind, like a product shot or a single button. Radial here draws its circle from the center of the box, so whatever you want glowing has to sit in the middle.

Question 6

How do I use a gradient in an email or an older browser?

Accepted Answer

For email, hit Download PNG and place it as an image, because Outlook on Windows and several other clients strip CSS gradients out entirely. For browsers a few versions behind, switch the CSS output to Compatible. That prints extra prefixed copies of the same line above the standard one, so an older engine finds a version it recognizes.

Gradient Generator

How the Gradient Generator Works