CSS Gradient
The Spectrum of Motion
🔒
🔒 100% Browser
Color Picker
🔲
Size
Presets
135°
The Spectrum of Motion
Gradients bring depth, mood, and personality to a flat digital surface. They are the transition between states—a fluid motion of light that guides the eye.
We allow you to sculpt color transitions with mathematical precision, generating high-performance CSS that works on every modern browser.
Sculpting the Flow
- Choose your start and end colors.
- Adjust the angle and stop positions for depth.
- Preview the motion on various background sizes.
- Copy the CSS 'linear-gradient' code for your styles.
The Smoothness Secret
Use three colors instead of two for a more natural, 'lush' look. A subtle middle color prevents a 'gray zone' in the center.
❓ Frequently Asked Questions
No. Modern browsers render CSS gradients with hardware acceleration, making them extremely fast and file-size efficient.
Unlike linear gradients that flow in one direction, radial gradients emerge from a single point, usually to create focus or glows.