CSS Gradient Generator
Build a linear or radial CSS gradient with a live preview and one-click copy.
Every calculation runs locally in your browser. Nothing you enter here is sent anywhere.
For informational and educational purposes only — not professional or technical advice, and not a substitute for consulting a qualified professional about your specific situation. TrueMeasureKit is not liable for decisions made based on these results. See our Terms of Service.
Linear vs. radial gradients
A linear gradient transitions colors along a straight line at whatever angle you set — 90deg runs left to right, 180deg top to bottom. A radial gradient instead radiates outward from the center in a circle, regardless of angle, which is why the angle control only applies to linear. Both accept any valid CSS color, but this generator sticks to hex for a predictable, copy-pasteable result.
Frequently asked questions
What's the difference between linear and radial gradients?
A linear gradient transitions colors along a straight line at a chosen angle. A radial gradient transitions colors outward from a center point in a circular or elliptical pattern — useful for spotlight or vignette effects.