Skip to content
ColorPlum

Tools

CSS gradient generator: linear and radial with PNG download

Pick two to five colors, choose linear or radial, set an angle from 0° to 360°, then copy the CSS or download a PNG at a phone, desktop, square or banner size. It starts with a plum #7B3F8C to pink #F6A5C0 blend.

By Paul Gunder. Every value is computed from published standards; see how ColorPlum works.

Updated 

background-color: #7b3f8c;
background-image: linear-gradient(90deg, #7b3f8c 0%, #f6a5c0 100%);

Variations

  • Reversed

    #F6A5C0 → #7B3F8C

  • Softer

    #A982B4 → #F9C5D6

  • Deeper

    #50295B → #A06B7D

  • Radial glow

    #7B3F8C → #F6A5C0
On this page

A CSS gradient is a background drawn by the browser: no image file, no extra download, and it scales to any screen. This generator gives you a preview and the code that produces it, and it can also save the result as a PNG for places where CSS does not reach, such as a phone wallpaper or a social post.

The controls

  • Color 1, Color 2 and so on. Each stop has a color picker and a hex box. The tool starts with two, plum #7B3F8C and pink #F6A5C0. Add a color appends a new stop (up to five), starting as a 50% tint of the last one, and Remove color appears once there are more than two.
  • Type. Linear blends along a line; radial blends outward from the center.
  • Angle. A slider from 0° to 360° in steps of 5°. 0° points up, 90° to the right and 180° down. It switches off for radial gradients.
  • Download size. Desktop 1920 × 1080, Desktop 2560 × 1440, Phone 1170 × 2532, Square post 1080 × 1080 or Banner 1500 × 500.
  • Copy CSS and Download PNG, plus a Variations row (Reversed, Softer, Deeper, Radial glow), each with its own copy button.

What the code looks like

The tool writes two lines: a background-color set to your first stop, then a background-image of the form linear-gradient(135deg, #7b3f8c 0%, #f6a5c0 100%). The first line is a safety net for software that ignores gradients. Stops are spread evenly: two sit at 0% and 100%, three at 0%, 50% and 100%, and five at every 25%. The tool has no control for moving a stop, so to bunch colors toward one end, repeat a color or edit the percentages in the copied CSS.

The midpoint of the starting pair is #B972A6. Blends between very different hues can look muddy in the middle, which is the usual reason to add a third color.

Worked example

You are making the header image for a monthly email newsletter. Keep the starting colors, set the angle to 90° for a left-to-right fade, choose Banner 1500 × 500, and press Download PNG. Place the newsletter name in white on the plum side: white measures 7.16:1 on #7B3F8C. Do not run white across the pink end, where it drops to 1.89:1. Black text works on the pink at 11.06:1, but only 2.93:1 on the plum. So put the title on the left in white and a short dark tagline on the right, or keep all the text over one end.

Tips

Sources

  1. W3C, CSS Images Module Level 3: linear-gradient() and radial-gradient() (checked 2026-11-10) w3.org
  2. W3C, WCAG 2.2: Success Criterion 1.4.3 Contrast (Minimum) (checked 2026-11-10) w3.org