Recreating the Diagonal Wipe Transition

Diagonal wipe transitions — like blinds closing — are a slick, characterful way to move between screens. One game on Apple Arcade uses them to great effect, and the pattern is achievable in CSS with a bit of cleverness around gradients and animation.

The Gradient Foundation

The core idea is repeating-linear-gradient. If you define a gradient with a repeating pattern, you get evenly spaced stripes. The trick is to use transparent as one of the colors, so the stripes become see-through gaps.

.gradient {
  background-image:
    repeating-linear-gradient(
      45deg,
      #ff8a00,
      #ff8a00 10px,
      #e52e71 10px,
      #e52e71 20px
    );
}

That yields a pattern like this:

If you use 10px as the gradient's "start" position and 20px as its "end" position, the stripe pattern repeats every 20 pixels. Half of each cycle is transparent, half is solid. Animate the "start" value upward toward 20px, and the transparent band shrinks until the entire screen is covered in solid color.

The Animation Problem

The issue is that you can't directly animate a value inside a gradient declaration like this:

Screenshot of a CSS code snippet on a dark gray background with syntax highlighting. An arrow is pointing from the repeating linear gradient on the element to another repeating linear gradient inside keyframes. A note that says not going to animate is displayed in large white letters above a crying emoji.

Custom properties normally aren't animatable — they're just strings. To make one usable as a length in a gradient, you need to register it with @property.

@property --start {
  syntax: "<length>";
  inherits: false;
  initial-value: 10px;
}
#cover {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(
    45deg,
    #ff8a00,
    #ff8a00 var(--start),
    transparent var(--start),
    transparent var(--end, 20px)
  );
  animation: cover 1s linear infinite;
}
@keyframes cover {
  to {
    --start: 20px;
  }
}

This approach works, but only in Chromium-based browsers, since @property has limited support elsewhere. A working demo with this technique inclues a prefers-reduced-motion media query to respect user settings, plus JavaScript that swaps the background mid-animation while the screen is fully covered, simulating a real screen transition.

The gradient's angle, stripe size, and animation speed can also be abstracted into custom properties, making the whole effect easy to tweak. The demo uses UI knobs for live adjustment.

Like and subscribe

A Cross-Browser Alternative with Masks

An alternative approach, suggested in a follow-up to an original demo, uses masks instead of gradients. This method offers solid support across all major browsers, not just Chromium.

Neither animating background color stops nor mask positions is particularly performant. But for screen wipes, the page is typically frozen or unresponsive until the transition completes, so the performance concern is largely moot.