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.