forked from TypeCellOS/BlockNote
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathgradients.module.css
More file actions
137 lines (123 loc) · 2.63 KB
/
gradients.module.css
File metadata and controls
137 lines (123 loc) · 2.63 KB
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
.barBorder {
border: rgba(255, 255, 255, 0.4) 1px solid;
:global(.light) & {
border: rgba(0, 0, 0, 0.6) 1px solid;
}
}
.tooltipArrow {
display: block;
border-left: 8px solid transparent;
border-bottom: 8px solid #333333;
border-right: 8px solid transparent;
:global(.light) & {
border-bottom: 8px solid #f5f5f5;
}
}
.translatingGlow {
background: linear-gradient(32deg, #2a8af6 0%, #a853ba 50%, #e92a67 100%);
background-size: 200% 200%;
animation: translateGlow 7s linear infinite;
will-change: filter;
}
@keyframes translateGlow {
0% {
background-position: -20% -20%;
}
25% {
background-position: 30% 80%;
}
50% {
background-position: 110% 110%;
}
75% {
background-position: 80% 30%;
}
100% {
background-position: -20% -20%;
}
}
.heroHeading {
background: linear-gradient(180deg, #ffffff 0%, #aaaaaa 100%), #ffffff;
:global(.light) & {
background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, #000000 100%);
background-clip: text;
}
background-clip: text;
}
.letterLine {
opacity: 0.2;
background: linear-gradient(
90deg,
#000000 0%,
#ffffff 20%,
#ffffff 80%,
#000000 100%
);
:global(.light) & {
background: linear-gradient(
90deg,
#ffffff 0%,
#000000 20%,
#000000 80%,
#ffffff 100%
);
}
}
.glow {
mix-blend-mode: normal;
filter: blur(75px);
will-change: filter;
}
.glowSmall {
filter: blur(32px);
}
.glowBlue {
background: linear-gradient(180deg, #58a5ff 0%, #a67af4 100%);
}
.glowPink {
background: linear-gradient(180deg, #ff3358 0%, #ff4fd8 100%);
}
.glowConic {
background: conic-gradient(
from 180deg at 50% 50%,
#2a8af6 0deg,
#a853ba 180deg,
#e92a67 360deg
);
}
.glowGray {
background: rgba(255, 255, 255, 0.15);
}
.gradientSectionBorder {
--gradient-y-offset: -200px;
--gradient-x-offset: -200px;
--height: 255px;
position: relative;
overflow: hidden;
will-change: filter;
}
.gradientSectionBorderLeft {
position: absolute;
width: 60vw;
height: var(--height);
left: var(--gradient-x-offset);
top: var(--gradient-y-offset);
background: linear-gradient(180deg, #58a5ff 0%, #a67af4 100%);
border-radius: 100%;
mix-blend-mode: normal;
filter: blur(50px);
}
.gradientSectionBorderRight {
width: 60vw;
position: absolute;
height: var(--height);
right: var(--gradient-x-offset);
top: var(--gradient-y-offset);
background: linear-gradient(180deg, #ff3358 0%, #ff4fd8 100%);
border-radius: 100%;
mix-blend-mode: normal;
filter: blur(50px);
}
.gradientSectionBorderDivider {
background: linear-gradient(90deg, #288cf9 0%, #e32c6b 100%);
}