a-soll.github.io/background.css at main · a-soll/a-soll.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.gradient-bg-wrapper {
  position: relative;
  overflow: hidden;
}

.gradient-bg-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    45deg,
    #ca66d3,
    #c973d9,
    #c87edf,
    #c789e4,
    #c694e8,
    #c79eeb,
    #c7a8ee,
    #c9b1f0
  );
  background-size: 400% 400%;
  animation:
    hueRotate 20s linear infinite,
    gradientShift 30s ease infinite;
  filter: hue-rotate(0deg);
}

@keyframes hueRotate {
  0%   { filter: hue-rotate(0deg); }
  50%  { filter: hue-rotate(10deg); }
  100% { filter: hue-rotate(0deg); }
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}