Zekaj tools

CSS only · WCAG 2.2 · 2.2.2 Pause, Stop, Hide · 1.4.3 Contrast

Moving gradient

Pick a background and three colours. They drift slowly across each other, like the background of the Gradient version of my site. Copy the HTML and CSS: the animation runs on CSS alone.

Your headline here

1× (11 to 18 seconds per loop)
80%
  • Text on the lightest and darkest point of the gradient–

Your HTML and CSS


      

      

    


    

      

        
How it works

        
Three round shapes, each filled with a radial-gradient that fades to transparent. Because their edges are soft, they blend into one another where they overlap. Each shape gets its own slow CSS animation that moves, turns and stretches it. The loops have different lengths (11, 14 and 18 seconds), so the pattern almost never repeats exactly.

        
Only transform is animated. The browser hands that to the graphics card, so it stays smooth and costs almost no battery. No JavaScript is needed on your site; the tool only uses it to build the code for you.

      


      

        
Moving backgrounds and WCAG

        
    
          
  • 2.2.2 Pause, Stop, Hide (level A): anything that moves on its own for more than 5 seconds next to other content needs a way to pause it. A purely decorative background is often seen as an exception, but a pause button is the safe and friendly choice. The code includes one.
    • 
          
  • Reduced motion: some people get dizzy or nauseous from movement, for example with vestibular disorders or migraine. They can ask for less motion in their system settings. The code respects that with prefers-reduced-motion: the gradient then stands still.
    • 
          
  • 1.4.3 Contrast: text on a gradient must be readable on every point the colours can reach. The tool checks your text colour against the lightest and darkest colour in the gradient, so it passes wherever the shapes drift.
    •