What is a CSS gradient?

A CSS gradient is a smooth transition between two or more colors, created entirely with CSS code. Gradients can be linear (colors transition along a straight line at any angle) or radial (colors radiate outward from a center point). They are used for backgrounds, buttons, and decorative elements without needing image files.

What is the difference between linear and radial gradients?

Linear gradients transition colors along a straight line at a specified angle (e.g., left to right, top to bottom, or diagonal). Radial gradients transition colors outward from a center point in a circular or elliptical shape. Linear gradients are more common for backgrounds, while radial gradients work well for spotlight effects.

How do I add a gradient to my website?

Use the Builderr Gradient Maker to design your gradient, then click Share > Export CSS to copy the CSS code. Paste the code into your stylesheet as a background property, for example: background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);

Gradient Maker

Create beautiful gradients. Define your colors or hit random.

Angle: 135°

Color Stops

0% #6366f1

100% #ec4899