Gradient

Create a background that works with your content

A CSS gradient is an image generated by the browser from two or more color stops. Use one to give a hero section depth, connect two brand colors, or create a subtle surface without downloading a bitmap. The background stretches with its element, so you need to test its composition at several sizes.

How to use this tool

1. Choose a gradient type and two starting colors. Keep the first experiment simple so changes are easy to understand.
2. Move the color stops to control how much space each color occupies. Change the angle to fit your actual section, rather than only the preview square.
3. Copy the background declaration into the selector for your element. Add a solid background color as a fallback and check text against every part of the gradient.

The middle stop holds the stronger blue until 65% of the gradient line. That keeps most of the surface visually consistent and places the lightest area at one edge. Use dark text on a light gradient or light text on a consistently dark one.