Guides

Short, practical how-tos for working with gradients, colour, and the Photoshop .grd format.

• Choosing accessible text colour over a gradient

  Putting text directly on top of a gradient looks great in a mockup and then fails in real use the moment the gradient shifts from a light stop to a dark one under the same line...

• How to avoid gradient banding

  Banding is when a smooth gradient shows visible stripes instead of a seamless fade, usually most obvious on a large, low-contrast gradient like a dark background or a subtle sky...

• How to convert CSS gradients to Photoshop GRD

  Photoshop stores gradient presets in its own binary format, a .grd file, not as CSS. If you designed a gradient for the web and want to use the exact same colors and stops insid...

• Linear vs radial vs conic CSS gradients

  CSS supports three fundamentally different gradient shapes: linear, radial, and conic. They solve different problems, and picking the wrong one is one of the most common reasons...

• Photoshop GRD to CSS: extract gradients

  A Photoshop .grd file can hold dozens or even hundreds of gradient presets, but there is no easy way to see their actual color values from inside Photoshop itself. If you inheri...