Glow Effect
radial-gradient radiates from one point in all directions.
1. Basic Syntax
background: radial-gradient(circle at center, white, blue);
2. Shape and Size
- circle or ellipse: gradient shape.
- at [position]: starting point (e.g.,
at top leftorat 20% 50%). - closest-side / farthest-corner: how far gradient should grow.
Tip
With radial gradients, you can create realistic highlights on buttons or vignette effect (darkening at corners).
/* Vignette effect */
background: radial-gradient(circle, transparent 50%, rgba(0,0,0,0.5) 100%);