Create animated gradients that shift and flow with customizable speed, angle, and color stops.
CSS Gradient Animator composes a moving background from an ordered set of color stops, a CSS gradient angle, and an animation speed. Adjusting those values lets you compare the motion visually and obtain stylesheet rules for the chosen result. The common surprise is that angle describes the direction of the color ramp, while speed describes change over time. An angle does not, by itself, promise that a particular colored band will travel in that same direction. This is CSS intended for an element background, not a pre-rendered frame sequence.
A color stop is a color, optionally paired with a position along the gradient line. Stop order defines the sequence through which the browser interpolates. The angle rotates that line for a linear gradient. Moving a middle stop changes the location and width of the blends on either side, so an equal number of colors does not produce equal visual bands.
The static gradient establishes which colors are painted and where. The speed setting controls how quickly the animated state advances. Element width, height, border radius, and competing background declarations affect the result after the CSS is placed in a page. A full-page preview can therefore show a different crop and apparent flow from a compact card using the same gradient settings.
Not necessarily. The angle defines the orientation and positive direction of the linear color ramp. Animation direction depends on which visual state changes over time. The two can appear related, but they are distinct settings. Use the preview to judge the resulting movement instead of inferring it from the angle value alone.
The painted area may have different dimensions or clipping than the animator's preview. Existing background declarations, background sizing, border radius, and the element's aspect ratio can also change which part of the moving gradient is visible. Compare the complete generated rules with the element's computed styles, especially when another selector sets a background property.
The behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.