components/styles/blob.module.css


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

.blob {
    min-height: 75%;
    min-width: 75%;
    /* aspect-ratio: 1; */
    background-color: #fff;
    background: -webkit-gradient(linear, left top, right top, from(#00FFFF), to(mediumpurple));
    background: linear-gradient(90deg,#0ff,#9370db);
    border-radius: 50%;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: blur(7vmax);
    height: 15vmax;
    left: 50%;
    opacity: 0;
    position: absolute;
    top: 50%;
    translate: -50% -50%;
    width: 20vmax;
    z-index: 0;
    animation-fill-mode: forwards;
}


.sblob {
    background-color: white;
    height: 15vmax;
    width: 20vmax;
    aspect-ratio: 1;
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    border-radius: 50%;
    background: conic-gradient(#00FFFF, mediumpurple);
    animation: rotate 20s infinite;
    opacity: 0.8;
    filter: blur(7vmax);
    z-index: -1;
}