BigBinary Academy

Learn Advanced CSS

Lesson

2.42`radial-gradient` Shape with Position 2

We can change the position of the gradient by specifying percentage values on the X-axis and Y-axis.

X-axis horizontal position:
- 0% represents the left edge of the container.
- 50% represents the center of the container.
- 100% represents the right edge of the container.
Y-axis vertical position:
- 0% represents the top edge of the container.
- 50% represents the center of the container.
- 100% represents the bottom edge of the container.

By combining both the values, we can position the gradient's center:

at 0% 0%: The top-left corner of the container.
at 50% 50%: The center of the container.
at 100% 100%: The bottom-right corner of the container.

Let's look at some examples:

In the example above, the first one creates a gradient with center at the top-left corner 0% 0%, and the second one creates a gradient with the center at the bottom right 100% 100%.