CSS Gradient Generator

What are CSS Gradients?

CSS gradients are a special type of <image> that allow you to display smooth transitions between two or more specified colors. They are not actual images, but are generated by the browser on the fly. This makes them very flexible and performant. They are commonly used to create background patterns, buttons, and other decorative elements on a webpage.

Linear Gradients (linear-gradient())

A linear gradient creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the <gradient> data type.

Basic Syntax: background: linear-gradient(direction, color1, color2, ...);

• Direction: Can be an angle (e.g., 45deg) or a keyword (e.g., to right, to bottom left).
• Colors: You need at least two colors (color stops) to create a gradient.

Radial Gradients (radial-gradient())

A radial gradient creates an image consisting of a progressive transition between two or more colors that radiate from an origin. Its shape may be a circle or an ellipse.

Basic Syntax: background: radial-gradient(shape size at position, color1, color2, ...);

• Shape: Can be circle or ellipse (the default).
• Position: Defines the center of the gradient. Defaults to center.