How to Use the CSS Gradient Generator

This tool provides a simple visual interface to create complex CSS gradients. Start by selecting the type of gradient you want to build. You can choose between linear, radial, or conic.

• Adjust settings. Use the sliders and inputs in the left panel to configure your gradient. For linear gradients, you can change the angle. For radial gradients, you can select a shape.
• Manage colors. Each color in the gradient is a "stop". You can change a color using the color picker, adjust its position with the slider, or remove it with the delete button. Add new colors to the gradient using the "Add Color" button.
• Preview and copy. The preview panel on the right updates in real time to show your changes. When you are happy with the result, click the "Copy" button to copy the generated CSS code to your clipboard.

Understanding CSS Gradients

CSS gradients are not colors but are a type of CSS image. Specifically they belong to the gradient CSS data type, which can be used anywhere an image data type is valid. This is most often for the background-image property. The browser generates them dynamically based on your CSS rules.

Linear Gradients

A linear gradient creates a smooth transition between two or more colors along a straight line. Its direction can be defined by an angle or by keywords.

The basic syntax is linear-gradient(direction, color-stop1, color-stop2, ...).

• Direction. This can be an angle like 45deg or keywords such as to right, to bottom left, or to top.
• Color Stops. You need at least two. Each stop consists of a color and an optional position (a percentage or length). If you omit the position, the stops are spaced evenly.

For example, a simple gradient from blue to green that flows from left to right would be:

background-image: linear-gradient(to right, blue, green);

Radial Gradients

A radial gradient transitions between colors starting from a central point and radiating outwards. It can be a circle or an ellipse.

The syntax looks like radial-gradient(shape size at position, color-stop1, ...).

• Shape. Can be circle or ellipse (the default).
• Size. Keywords like closest-side, farthest-corner define how large the gradient's shape is.
• Position. Defines the center of the gradient, defaulting to center.

A simple circular radial gradient from red to yellow would be:

background-image: radial-gradient(circle, red, yellow);

Conic Gradients

A conic gradient transitions colors around a center point, similar to a color wheel or a pie chart. The colors rotate around the center.

The syntax is conic-gradient(from angle at position, color-stop1, ...).

• Angle. The from value defines a starting angle for the gradient.
• Position. Just like radial gradients, this defines the center point.

This type of gradient is excellent for creating pie charts without using images. For example:

background-image: conic-gradient(blue 0% 25%, green 25% 75%, red 75% 100%);

Advanced Techniques and Tips

Creating Hard Lines

To create a sharp line instead of a smooth transition, place two color stops at the exact same position. This technique is the foundation for creating stripes and other patterns.

/* Creates a background of blue and green stripes */
background-image: linear-gradient(to right, blue 50%, green 50%);

Layering Multiple Gradients

You can apply multiple backgrounds to a single element by separating them with a comma. This allows you to layer several gradients on top of each other to create intricate patterns and textures. The first gradient in the list is the top layer.

background-image:
    linear-gradient(45deg, rgba(0,0,0,0.2) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(0,0,0,0.2) 25%, transparent 25%);

Repeating Gradients

CSS also provides repeating-linear-gradient(), repeating-radial-gradient(), and repeating-conic-gradient() functions. These work just like their non-repeating counterparts, but the pattern of color stops will repeat indefinitely to fill the background.

Accessibility Considerations

Text Readability and Contrast

When placing text over a gradient background, you must ensure sufficient color contrast for readability. Because the background color changes, the contrast level may vary across the text. Test your text color against all colors in the gradient. A good practice is to add a subtle text-shadow to the text to help it stand out, or to use a gradient with a low color variance.

Use in Animations

Gradients can be animated, for example by changing the background-position. These animations can sometimes be distracting or cause issues for users with vestibular disorders. If you use an animated gradient, consider honoring the prefers-reduced-motion media query to provide a static background for users who request it.