Random Gradient

The Geometry of Two Colors

A CSS linear gradient is defined by three elements: a direction angle, a start color, and an end color. The browser calculates every intermediate shade along the angle axis using linear interpolation in the sRGB color space. Zero degrees points upward, 90 degrees points rightward, and 180 degrees points downward. Every angle between 0 and 359 is valid. This tool selects all three values independently from the Web Cryptography API, producing 16.7 million × 16.7 million × 360 ≈ 100 quadrillion distinct gradients.

Why Random Gradients Surprise

Josef Albers, the Bauhaus master who spent decades studying color interaction, demonstrated that the same color looks entirely different depending on its neighbors. A warm orange placed next to deep blue appears to glow. Placed next to red, it recedes. Random gradient generation produces combinations that a deliberate designer might never attempt, and some of these unexpected pairings reveal startling beauty. The complementary gradient below emerges from opposite sides of the color wheel, creating maximum visual energy through hue contrast alone.

Analogous combinations, where both colors share a similar hue region, produce softer, more atmospheric gradients. These appear roughly 25% of the time in purely random generation.

The Harmony Spectrum

The statistics panel labels each gradient by its color relationship. Monochrome pairs differ by fewer than 15 degrees on the color wheel, producing subtle tonal shifts. Analogous pairs (15 to 45 degrees apart) share a color neighborhood. Contrasting gradients span 90 to 150 degrees. Complementary pairs sit on opposite sides of the wheel (150 to 180 degrees apart), creating the strongest visual tension. The label updates with each generation, turning every click into a micro color-theory lesson.

Practical CSS

The generated gradient copies directly as a CSS linear-gradient() value. Use it as a background property on any element. Layer it behind text with background-clip: text for gradient typography. Overlay it on images with a semi-transparent variant. Apply it to buttons, cards, hero sections, or loading screens. The angle and colors are the complete specification: paste, adjust opacity if needed, ship.

Private by Architecture

Both colors and the angle originate from your browser's Web Cryptography API. The server delivers this page and is finished. Your generated gradients, your history, and your generation count stay in your browser. The server stores nothing. Sharing the URL shares the tool, never any generated output. Each visitor's browser produces entirely independent results.

Real-World Gradient Inspiration

Random generation reveals unexpected combinations, but real-world projects show how color relationships actually work in practice. While this tool generates fresh CSS gradients from two independent colors and a random angle, Color Discovery explores palettes drawn from completed creative work across architecture, product design, packaging, and interiors. These palettes demonstrate how hues interact in real materials, lighting conditions, and visual contexts. If a randomly generated gradient sparks an idea, browsing real-world palettes can help refine it into a combination proven in professional design. Whether you’re building a UI background, selecting material finishes, or searching for the right chromatic atmosphere, discover more at Color Discovery.