Radial CSS Gradient Maker
Visual builder for CSS radial-gradient() with circle and ellipse shapes, focal positioning, and multi-stop color controls.
100% Client-SideZero Data Collection
radial-gradient(circle at center, ...)
Geometry Shape
Origin Position
Color Stops (3/8)
0%
60%
100%
CSS Radial Gradient Rule
background: #3B82F6; background: radial-gradient(circle at center, #3B82F6 0%, #1E3A8A 60%, #0F172A 100%);
Technical Specification & Mathematical Principles
Radial gradients interpolate color outward from an origin point (cx, cy): distance = √[(x - cx)² + (y - cy)²].
Color stops map monotonically along the radius r ∈ [0.0, r_max].
Frequently Asked Questions
A 'circle' gradient maintains a constant 1:1 aspect radius regardless of the container dimensions. An 'ellipse' gradient stretches proportionally to match the container's width and height.
Related Design & Color Instruments
Procedural Palette Generator
Generate balanced 5-color palettes based on geometric angles on the HSL color wheel with lockable color slots.
Open Tool
Image Palette Extractor
Extract 6 dominant theme colors from any uploaded image using Web Worker K-Means clustering off the main thread.
Open Tool
CSS Gradient Maker
Design linear and radial CSS gradients with 360-degree angle control, multi-stop adjustments, and instant code export.
Open Tool
Color Shades Step Generator
Generate smooth linear step interpolations from any base color towards pitch black (#000000).
Open Tool