Gradient maker

Choose colors and a direction

Pick the endpoints, or paste HEX, RGB, or HSL values. The preview updates as you edit. Linear gradients follow a direction; radial gradients spread from the center. An optional middle color adds a third stop without making the main form longer.

Copy it or save it

Copy CSS gives a background declaration ready to paste into your stylesheet. Download PNG makes a 1600 × 900 image in your browser. A 90-degree gradient from purple to peach runs left to right. Reversing the colors reverses that transition.

Check the text on top

A gradient has many background colors. Check text against the lightest and darkest parts it crosses with the Color converter and contrast checker. The result link carries your two endpoint colors, but those endpoints are not a complete accessibility test of the finished design.

The tool supports opaque colors and ordered color stops. It does not generate animation. No image or color choices are uploaded or stored.

Shape the transition

Start with a palette or enter your own colors. Reverse colors flips the transition. Choose a direction for a linear blend or a center position for a radial glow. Add a middle color when you want a third tone.

Open Color positions to control how much space each color gets. For example, first at 25% and last at 75% leaves solid-color areas at both ends and blends across the middle half. Keep positions in order. The CSS and PNG download use these same settings.

FAQs

How do I add a third color?

Open Add a middle color and enable it. It starts at 50%. Open Color positions and change Middle color (%) to move it along the blend.

What does the direction mean?

CSS uses 0 degrees toward the top, 90 toward the right, 180 toward the bottom, and 270 toward the left. Direction does not apply to a radial gradient.

What size is the downloaded image?

The PNG is 1600 × 900 pixels. CSS scales to its element; the downloaded picture has fixed dimensions. The preview and export can differ slightly with color management.