Gradients that stay on brand
A gradient is one of the fastest ways to make marketing assets, hero sections, and buttons feel polished, but ad-hoc color choices drift off brand. This tool builds gradients directly from your two brand colors and emits clean, copyable CSS with a live preview.
How it works
You provide a primary and secondary hex color. The tool validates and normalizes them, then assembles a CSS gradient string.
- Linear gradients use your direction in degrees:
linear-gradient(135deg, primary 0%, secondary 100%). - Radial gradients emanate from the center:
radial-gradient(circle at center, ...). - Stop positions let you bias the blend toward one color.
- The optional 3-stop mode inserts a middle color that is the per-channel RGB average of the two brand colors, placed at the midpoint of your stops.
Worked example
Suppose your brand colors are #2563eb (blue) and #9333ea (purple). Choosing a linear gradient at 135 degrees with stops at 0% and 100% outputs:
background: linear-gradient(135deg, #2563eb 0%, #9333ea 100%);Enable 3-stop mode and the tool computes the midpoint: the per-channel RGB average of those two values is approximately #5c4bee, inserted at the midpoint between your two stop positions. The result blends more smoothly across large surfaces like hero banners.
Common angle reference
| Angle | Direction |
|---|---|
| 0deg | Top to bottom |
| 90deg | Left to right |
| 135deg | Top-left to bottom-right (popular for hero sections) |
| 180deg | Bottom to top |
Radial gradients ignore the angle setting and always emanate from the center of the element.
Common gradient use cases in brand design
Different surfaces call for different gradient approaches:
- Hero sections and banners: Linear gradients at 135deg work well here because they follow the natural eye path from top-left to bottom-right. Use a wide stop spread (0% to 100%) for a full-bleed effect, or compress the stops to create a band of color that frames content.
- Buttons and CTAs: A subtle gradient (5% to 95% stop positions) on a button adds depth without looking dated. Keep the two brand colors close in brightness so the gradient reads as a single button color with dimensionality.
- Social media graphics and cards: Radial gradients suit square or portrait formats, emanating from the center to create a spotlight effect. Linear gradients work better on landscape formats where the horizontal sweep feels natural.
- Data visualization backgrounds: A low-contrast gradient (two colors close in lightness) avoids competing with the data it frames while still communicating brand.
Practical guidance
- For text over a gradient, verify the contrast at both the lightest and darkest points of the blend — the middle of a gradient can create a low-contrast zone if the two brand colors are similar in brightness.
- Stop position controls let you bias the blend: push the first stop to 30% and the gradient feels more like your primary color with an accent fade at the edge.
- The copied CSS value is a complete
background:declaration and works in any browser that supports CSS gradients, which is all modern browsers. - Paste the same hex values into Figma’s gradient fill panel to keep design files in sync with code.