ToolnozaHow the background moves
A CSS gradient is a generated background image. This tool gives it three color stops and enlarges it to 300% of the element dimensions. The keyframes move background-position from one side to the other and back, creating the impression of colors flowing through the element.
The angle sets the direction of the underlying linear gradient. The duration is the complete outward-and-return cycle, not the one-way journey. Try 10 seconds first and then compare a slower cycle. Closely related colors often produce a quieter result than strongly contrasting colors.
Apply the CSS to a real element
Copy the stylesheet into your CSS file and add class="animated-gradient" to the element. The class paints a background; it does not create content, height, spacing or text colors. If an empty element has no height, its gradient may not be visible.
The preview pause button stops only the on-page demonstration. The exported code continues to contain the animation. To stop it permanently, remove the animation declaration or set animation: none in your own stylesheet. Use a unique class and keyframe name if your site already uses these names.
Check readability and motion
The export includes prefers-reduced-motion so people who request reduced motion receive a static gradient. Keep this rule when integrating the code. If motion continues, inspect whether a later or more specific CSS rule overrides it.
Check foreground text against every part of the moving background, not just a single frame. A contrast checker can test individual color pairs, but it cannot certify the entire animation. For essential content, a stable solid text panel can make readability more predictable. Test the animation on a phone and reduce decorative motion if scrolling becomes sluggish.
How to use the tool
Choose three colors, set the angle and cycle duration, then copy the CSS. Add the animated-gradient class to your element.
Worked example
A 135° blue, purple and cyan gradient with a 10-second cycle creates a smooth moving background.
Do I need JavaScript for the exported gradient?
No. The exported code uses CSS keyframes and a media query. Your element still needs dimensions or content to make its background visible.