How to Create Background Gradients | Color Combinations That Work for Web Design

A background gradient blends two or more colors across a surface. It can add depth to a website’s introduction or section heading, but an overly dramatic transition may compete with the message and buttons. Here is how to choose a restrained color pair, create the effect with CSS (Cascading Style Sheets, the rules that control a web page’s appearance), and check that the text remains readable.

Start with two colors and decide where to use them

First, select a specific area for the gradient. A service introduction or short information section is easier to evaluate than applying a gradient to an entire site. If the surrounding photographs and cards are already colorful, keep the background transition subtle.

For a first attempt, choose two lightness variations of the same color or neighboring hues, such as blue and blue-green. Hue means the basic family of a color, such as red or blue. Related hues tend to make the direction of the transition easier to control than widely separated colors. Still, similar hues can have different brightness, so check the text placed on top.

Judge the pair together with the actual headline, supporting text, and button rather than viewing the swatches alone. A large brightness change across the background can make text harder to read at one end. Check the starting color, ending color, and locations in between.

Make a light gradient and a dark gradient

Example A is a light gradient for a service introduction. Start with blue-tinted white ■#F2F6FA and finish with pale blue ■#DCEAF0. Use dark blue-gray ■#263A4C for the headline and body text. Contrast between that text and the starting color is approximately 10.79:1; against the ending color it is about 9.53:1. The related, low-saturation surfaces keep the background from competing with the content.

Use deep teal ■#255B71 for the primary button and white ■#FFFFFF for its label. Their text contrast is about 7.46:1. A dark button can stand apart from the pale surface, though its outline and surrounding space still need checking in the finished layout.

In CSS, the linear-gradient() function creates a transition along a straight line. The following example sets an angle of 120deg and uses RGB (red, green, and blue channel values) to express the same two colors shown for Example A.

background: linear-gradient(120deg, rgb(242 246 250), rgb(220 234 240));

Example B uses a darker treatment for an event announcement. Blend deep blue ■#173754 into dark blue-green ■#285E77, and place white ■#FFFFFF headline text on top. The endpoint contrast ratios with white are about 12.27:1 and 7.10:1, respectively. This can give a prominent section structure without requiring several unrelated bright colors.

For Example B’s registration button, use pale mint ■#E8F1EE with dark blue ■#173754 lettering, a contrast ratio of about 10.67:1. Also compare the pale button surface with each end of the dark gradient so the control itself remains identifiable, not just its text.

Fine-tune direction, color count, and contrast

In CSS gradient angles, 0deg runs from bottom to top and 90deg runs from left to right. An angle such as 120deg creates a diagonal transition. Changing the angle or the positions of color stops changes which regions receive each color. Start with two stops and add a middle color only if it serves a clear purpose.

WCAG (Web Content Accessibility Guidelines) 2.2 Level AA, a web accessibility conformance level, requires at least 4.5:1 contrast for ordinary text and 3:1 for qualifying large text. The figures above are calculations for specified opaque solid-color pairs; they do not certify every position in a rendered gradient. Test the colors behind each part of the text, including the middle, and add a solid text panel if necessary.

On a phone, lines wrap differently and may cross another part of the gradient. Check headings, descriptions, and buttons at multiple screen widths. HueRoll lets you enter HEX codes (hexadecimal color notation), explore lighter and darker variants, and compare a selected color with white or black. It cannot automatically evaluate arbitrary two-color pairs or an entire gradient, so verify the actual layout separately.