CSS Gradient Generator

Why Does My Gradient Look Muddy in the Middle?

It's common for the transition between two colors to produce a dirty, grayish tone. A gradient from blue to orange will look muddy in the middle. This isn't a matter of taste; it's a result of how far apart the two colors are on the color wheel.

By default, CSS gradients create a straight line between two colors in RGB space. If you connect colors on opposite sides of the color wheel (complementary colors), that line passes directly through the desaturated gray center. That's what makes the transition look muddy.

• Connect colors that are close on the color wheel, within about 30-60 degrees of each other. Think blue to purple, or orange to pink. This tool's "🎲 Randomize" button uses this exact method to pick colors.
• If you must use complementary colors, add an intermediate color stop to create a path through a brighter color. Going around the color wheel—like from blue → teal → yellow—avoids the muddy center.
• Varying the lightness (brightness) of the colors also makes the gradient feel much more natural. Two colors with the same brightness can look blurred and indistinct where they meet.
• Pairing two highly saturated colors can sometimes create an artificial color band at the transition. Lowering the saturation slightly will usually fix this.

Linear, Radial, Conic: When to Use Which

For conic gradients, you can set a starting angle. When you select "🌀 Conic" in this tool, the angle slider controls the `from Xdeg` value. An angle of 0deg starts at the top (12 o'clock) and proceeds clockwise.

For radial gradients, the angle is irrelevant, so the slider is hidden. Instead, you can select the `Shape` (Circle/Ellipse) and the `Center position`. Setting the center to "Top" can create the effect of light shining down from above.

Creating Overlays for Text on Images

In practice, one of the most common uses for gradients isn't for creating pretty backgrounds, but for ensuring text on top of a photo is readable. If you place white text over a hero image, it will disappear into any bright parts of the photo. But darkening the entire image makes it look dull.

The solution is a transparency gradient that darkens only the area behind the text. By setting one color stop to zero opacity, that part of the image remains fully visible, while the other end fades smoothly to a darker shade.

1. Set both color stops to black (#000000).
2. Set the first stop's opacity to 0 and its position to around 40%.
3. Set the second stop's opacity to 70-80% and its position to 100%.
4. Set the angle to 180deg (top to bottom) and copy the CSS.

.hero {
  position: relative;
  background: url(photo.jpg) center/cover;
}
/* Darken only the bottom — for when text is at the bottom */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0) 40%,
    rgba(0, 0, 0, 0.75) 100%);
}
.hero h1 { position: relative; z-index: 1; color: #fff; }

Making Stripes with Repeating Gradients

It's common to enable the "Repeating" option and feel like nothing happened. The `repeating-` prefix works by restarting the gradient from the beginning as soon as it ends. If your color stops are spread out across the full 0% to 100% range, the gradient fills the container exactly once, leaving no space to repeat.

To create stripes, you must define your color stops within a narrow range. And by placing two different colors at the same position (e.g., both at 50%), you can create a hard, sharp line with no gradation.

/* Diagonal stripes — placing stops at the same position creates a hard edge */
background: repeating-linear-gradient(45deg,
  #4f46e5 0px, #4f46e5 10px,
  #c7d2fe 10px, #c7d2fe 20px);

Practical Considerations

• Text Contrast — Text on a gradient background can easily become unreadable on the lighter end. Always check contrast against your lightest color stop.
• Color Banding — Large, smooth gradients can sometimes display visible bands of color, especially between dark shades. Adding another color stop or overlaying a very subtle noise texture can help mitigate this.
• Button Hover States — Gradients cannot be smoothly animated with CSS `transition`. The color will change abruptly on hover.
• Dark Mode — A bright gradient can be jarring in dark mode. Prepare a separate, desaturated, and darker version for dark-mode users.