Create smoothly animated CSS gradient backgrounds with direction, speed, and color controls.
This tool builds a moving linear-gradient background and hands back ready-to-use CSS: a background declaration plus a matching @keyframes block. You choose two or more colors, a direction (angle or edge keyword like 'to right'), and a speed, and it animates background-position across an oversized background-size so the colors appear to drift rather than jump. What people usually miss: CSS cannot tween between arbitrary color stops directly, so all of the smoothness comes from that position trick, not from the colors themselves changing.
A concrete input and expected output from the current implementation.
Input
Colors: #FF3B30, #007AFF, #34C759 - Direction: 45deg - Speed: 8s
Expected output
.gradient-bg {
background: linear-gradient(45deg, #FF3B30, #007AFF, #34C759, #FF3B30);
background-size: 400% 400%;
animation: gradientShift 8s ease infinite;
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
} background-size is set to 400% so background-position has room to travel; sliding it from 0% to 100% and back over the 8s duration reads as continuous motion. The 0% and 100% keyframes both use background-position: 0% 50%, so the loop restart itself has no jump; repeating #FF3B30 at the end of the stop list instead controls what color the far end of that travel (position 100%) blends toward, so the sweep ends back on the starting hue rather than on #34C759.
CSS has no native way to tween a gradient's own color stops, so the tool sets background-size well above 100% (commonly 300-400%) and animates background-position back and forth inside that oversized canvas. The colors never change; only the visible window into the gradient shifts, which is what reads as continuous drift across the element.
The angle control becomes the first argument of linear-gradient() (e.g. 45deg or to right), the chosen colors become the comma-separated stop list, and the speed control sets animation-duration on the generated @keyframes rule. The first color is often repeated as the last stop too, since with an oversized background-size the far end of the position travel blends toward whichever color is last in the list; repeating the first color there makes that far end match the starting hue instead of ending on an unrelated one.
The tool works with any number of stops you add, but the smooth-drift illusion depends on the position trick, not real color blending, so packing in many closely spaced colors at a fast speed tends to read as flashing rather than a slow gradient shift. Two to four well-separated colors at a longer duration looks most convincing.
No. Current Chrome, Firefox, Safari, and Edge all support linear-gradient() and CSS animations unprefixed, so the output can be pasted as-is. Only very old browser versions ever required a -webkit- prefix for gradients, and that is not a practical concern today.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.
Preview how screen colors translate to print with CMYK simulation and proofing.
Preview any Google Font at various sizes, weights, and with custom sample text.
Create linear, radial, and conic CSS gradients with a visual editor and code output.
Generate harmonious color palettes from a base color using color theory rules.
Simulate how colors appear to people with various types of color vision deficiency.