Problem description

Given an HTML page containing a <section class="gradient-bg"></section> element, write CSS to:

• Apply a linear-gradient background with at least four distinct color stops.

• Set the background-size large enough (e.g., 400% 400%) to enable smooth movement of the gradient.

• Define a @keyframes gradientShift animation that changes background-position from 0% 50% to 100% 50% and back.

• Apply the gradientShift animation to the section with a duration of 10s, easing ease, and infinite iterations.

Goal

Write CSS rules to animate the .gradient-bg element so its gradient background shifts positions, creating a smooth color transition effect.

Constraints

• Use only CSS (no JavaScript).

• Section should fill the viewport, width: 100%; height: 100vh;.

• Gradient should be linear-gradient(-45deg, #ff9a9e, #fad0c4, #a6c1ee, #fdcbf1).

• Background size should be 400% 400%.

• Animation name should be gradientShift.

• Animation duration should be 10s.

• Animation timing function should be ease.

• Animation iteration count should be infinite.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.