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.
Tips and notes
For accessible text over a gradient, pick brand colors with enough contrast against your foreground, and prefer the darker color where text sits. A 3-stop gradient reads smoother on large surfaces like hero banners. Because the output is plain CSS, the same values map directly into design tools that accept gradient stop lists.