CSS Gradient Generator

Create CSS gradients visually

Create CSS gradients visually with the FunRGB Gradient Generator. Add multiple color stops, move them directly on the gradient bar, change their colors and opacity, and adjust the gradient angle while seeing the result instantly.

Each gradient can contain up to 20 color stops. Click the gradient strip to add a new stop or drag an existing stop to change its position. Select any stop to edit its HEX color, hue and opacity.

For every selected color, FunRGB also shows useful color values including RGB, CMYK, OKLCH and HSL, making it easier to use the same color across different design and development workflows.

When your gradient is ready, copy the generated CSS linear-gradient() code and use it directly in your stylesheet.

How to create a CSS linear gradient

Start by choosing the colors you want to use in your gradient. Add additional color stops wherever you need more control over the transition.

Drag the stops along the gradient bar to control where each color appears. You can also enter an exact percentage for precise positioning. Adjust the gradient angle to change its direction and use opacity to create transparent or semi-transparent transitions.

The preview updates automatically whenever you change a color, position, opacity or angle. The corresponding CSS code is generated at the same time, so you can copy it as soon as the gradient looks right.

What is a gradient color stop?

A color stop defines a color at a specific position inside a gradient. For example, a stop at 0% controls the beginning of the gradient, while a stop at 100% controls the end.

Adding intermediate stops gives you more control over color transitions and makes it possible to create complex multi-color gradients instead of simple two-color blends.