Gradient CSS
Preview
How it works
Shape & Size:
ellipse 50% 50% → The gradient is an ellipse with width and height each 50% of the element.
at 50% 50% → The ellipse is centered in the element (50% from top, 50% from left).
The size of the hue is relative to the size of the box that it's inside.
Color Stops:
Each rgba() defines a color and its position along the gradient:
rgba(255, 165, 0, 0.6) 0%→ Orange at the center (60% opacity).rgba(255, 165, 0, 0.3) 25%→ More transparent orange.rgba(0, 255, 255, 0.2) 45%→ Cyan with low opacity.rgba(0, 255, 255, 0) 65%→ Fully transparent cyan edge.