Plus Pattern Background
A tidy grid of plus signs where every sign turns a quarter at once, easing like clockwork, while a paler offset grid turns the other way. A registered @property angle turns each sign in place.
Also known as: plus sign pattern css, animated cross pattern, rotating crosses background.
HTML
<div class="bgx-rotating-plus-pattern" aria-hidden="true"> <span class="bgx-rotating-plus-pattern-a"></span> <span class="bgx-rotating-plus-pattern-b"></span> </div>
CSS
.bgx-rotating-plus-pattern {
--c: var(--bgx-color, #3b82f6);
font-size: var(--bgx-size, 16px);
position: absolute;
inset: 0;
overflow: hidden;
--tile: 2.4em;
--w: 0.1em;
background: color-mix(in srgb, var(--c) 5%, #fff);
}
.bgx-rotating-plus-pattern span {
--a: var(--bgx-rotating-plus-pattern-a);
position: absolute;
inset: 0;
background:
linear-gradient(var(--a), transparent calc(50% - var(--w)), currentColor 0 calc(50% + var(--w)), transparent 0),
linear-gradient(calc(var(--a) + 90deg), transparent calc(50% - var(--w)), currentColor 0 calc(50% + var(--w)), transparent 0);
background-size: var(--tile) var(--tile);
background-position: var(--at);
-webkit-mask: radial-gradient(circle, #000 0.55em, transparent 0.58em) var(--at) / var(--tile) var(--tile);
mask: radial-gradient(circle, #000 0.55em, transparent 0.58em) var(--at) / var(--tile) var(--tile);
animation: bgx-rotating-plus-pattern-turn 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.bgx-rotating-plus-pattern-a {
--at: 0 0;
color: var(--c);
}
.bgx-rotating-plus-pattern-b {
--at: calc(var(--tile) / 2) calc(var(--tile) / 2);
color: color-mix(in srgb, var(--c) 35%, transparent);
animation-direction: reverse;
}
@property --bgx-rotating-plus-pattern-a {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
@keyframes bgx-rotating-plus-pattern-turn {
0%, 20% { --bgx-rotating-plus-pattern-a: 0deg; }
80%, 100% { --bgx-rotating-plus-pattern-a: 90deg; }
}
@media (prefers-reduced-motion: reduce) {
.bgx-rotating-plus-pattern, .bgx-rotating-plus-pattern *, .bgx-rotating-plus-pattern::before, .bgx-rotating-plus-pattern::after, .bgx-rotating-plus-pattern *::before, .bgx-rotating-plus-pattern *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--bgx-coloron the element or a parent. Currently previewing#3b82f6. - Pattern scale: set
--bgx-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.