Gradient CSS syntax
A CSS gradient is an image you set on background. A linear gradient blends colors along a line at a given angle; a radial gradient blends outward from a center point.
background: linear-gradient(135deg, #2563eb, #7c3aed);
The angle 0deg points up, 90deg points right, and so on. Each color is a stop; with two stops the colors blend evenly across the box. This tool writes that rule for you and previews it live.
Worked example
A blue-to-purple diagonal:
Colors: #2563eb → #7c3aed.
Angle: 135° (top-left to bottom-right).
CSS:
background:linear-gradient(135deg,#2563eb,#7c3aed);Tips and browser support
CSS gradients are widely supported in all modern browsers and need no images, so they're crisp at any size and fast to load. For a radial gradient the angle doesn't apply; the blend radiates from the center. You can add more color stops in your CSS for richer effects, and pair a gradient with background-attachment or text-clipping for headers and buttons.
Tip: want a coordinated two-color pair to start from? Use the color palette generator.