How to Create a CSS Linear Gradient Background

The short answer

A CSS linear gradient blends colors along a straight line. For a page or component background, choose two colors, set the direction, preview the transition, and use the resulting linear-gradient() value in your stylesheet.

ByteDip’s Gradient Generator creates a two-color linear gradient in your browser. It previews the blend and copies the CSS value for you to place in a background declaration.

Start with two colors and preview the result before copying it into your stylesheet. Open the CSS Gradient Generator

Create a two-color background

1. Choose the start and end colorsPick the two sRGB colors you want the gradient to blend between.
2. Set the angleAdjust the direction and watch the preview update as you work.
3. Copy the gradient valueCopy the linear-gradient() value shown by the tool.
4. Use it as a backgroundPlace the value in a background or background-image declaration, then check the result in the real component.

.hero {
  background-image: linear-gradient(135deg, #5B5CE2, #23B5AA);
}

The tool copies the linear-gradient() value; the class and property in this example show one way to use it in a stylesheet.

Choose a direction that fits the layout

The angle controls the direction of the gradient line. In CSS, 0deg points upward, and increasing the angle rotates clockwise. Use the preview to see how that direction works with the section shape and where its text or controls sit.

The CSS Images Module specification defines linear-gradient() syntax and the direction of gradient lines. Read the W3C linear gradients specification

Check text placed over the gradient

A gradient changes color across its area, so text may sit over backgrounds with different contrast. Check the actual heading, button, or label at each important position. A single contrast result for one sampled color does not evaluate the full gradient or certify accessibility.

The checker evaluates a pair of opaque sRGB colors; sample relevant points on the gradient and review the component and its states. Check two colors with ByteDip’s Contrast Checker

The guide covers the broader checks needed beyond one color pair. Read the color contrast guide

What this generator supports

ByteDip’s Gradient Generator uses two selected sRGB colors and an angle to create a two-stop linear gradient. The preview and CSS value are generated locally in your browser.

• It creates linear gradients with two color stops.
• It does not create radial, conic, repeating, multi-stop, or text gradients.
• It copies the CSS value; you choose where to apply it in your stylesheet.

Try it

Choose two colors, adjust the angle, and review the gradient before using it in a page or component.

Open the browser-based Gradient Generator to preview and copy a two-color linear-gradient() value. Create a CSS linear gradient with ByteDip