Gradient Dialer

Designs gradients for hero banners, CTA buttons, overlays, and illustration fills. The contrast cards report the lowest ratio against the explicit color stops only; they do not certify contrast across every interpolated point of the rendered gradient.

Start with a preset, switch between linear and radial, then move the stops while watching the stop-level contrast numbers. Use Copy CSS for implementation and Copy TW when you want a Tailwind-ready snippet.

Best for marketing pages, product headers, posters, and accent backgrounds where color harmony matters. The custom text color check compares only the explicit stops and is a quick sanity pass, not a WCAG conformance test.

Two stops is the practical minimum for a simple gradient. Stop-level checks can miss lower contrast in colors created between stops, so test the final rendered text over the actual gradient before making an accessibility claim.