Skip to content

Instantly share code, notes, and snippets.

@mngyuan

mngyuan/glowglitch.css

Created November 29, 2022 16:53
Show Gist options
  • Save mngyuan/a582476c410a976e8da8e97d23b88f56 to your computer and use it in GitHub Desktop.
Save mngyuan/a582476c410a976e8da8e97d23b88f56 to your computer and use it in GitHub Desktop.
Download ZIP
glow glitch css effect
Raw
glowglitch.css
.glowGlitch {
position: relative;
padding: 0 20px;
display: inline-block;
border-radius: 2px;
color: #000;
-webkit-animation: neon1 3s ease-in-out infinite alternate;
animation: neon1 3s ease-in-out infinite alternate;
-webkit-box-shadow: 0 0 23px 6px rgba(255, 213, 0, 0.52);
box-shadow: 0 0 23px 6px rgba(255, 213, 0, 0.52);
background-image: linear-gradient(93deg, #ffec00 -2%, #ffd500 97%);
}
.glowGlitch,
.glowGlitch__Text {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.glowGlitch__Text {
-webkit-animation: glitch2 2s steps(100) infinite;
animation: glitch2 2s steps(100) infinite;
will-change: text-shadow;
}
.glowGlitch--Default,
.presentation__Special .richText h3,
.product__Special .richText h3 {
font-size: 60px;
font-weight: 700;
font-style: italic;
line-height: 1;
letter-spacing: -1px;
text-align: center;
text-transform: uppercase;
display: inline !important;
}
.glowGlitch--Default b,
.presentation__Special .richText h3 b,
.product__Special .richText h3 b {
text-transform: none;
}
@media (max-width: 1024px) {
.glowGlitch--Default,
.presentation__Special .richText h3,
.product__Special .richText h3 {
font-size: 38px;
line-height: 0.95;
letter-spacing: -1.13px;
}
}
.glowGlitch {
position: relative;
padding: 0 20px;
display: inline-block;
border-radius: 2px;
color: #000;
-webkit-animation: neon1 3s ease-in-out infinite alternate;
animation: neon1 3s ease-in-out infinite alternate;
-webkit-box-shadow: 0 0 23px 6px rgba(255, 213, 0, 0.52);
box-shadow: 0 0 23px 6px rgba(255, 213, 0, 0.52);
background-image: linear-gradient(93deg, #ffec00 -2%, #ffd500 97%);
}
.glowGlitch,
.glowGlitch__Text {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.glowGlitch__Text {
-webkit-animation: glitch2 2s steps(100) infinite;
animation: glitch2 2s steps(100) infinite;
will-change: text-shadow;
}
.glowGlitch--Default,
.presentation__Special .richText h3,
.product__Special .richText h3 {
font-size: 60px;
font-weight: 700;
font-style: italic;
line-height: 1;
letter-spacing: -1px;
text-align: center;
text-transform: uppercase;
display: inline !important;
}
.glowGlitch--Default b,
.presentation__Special .richText h3 b,
.product__Special .richText h3 b {
text-transform: none;
}
@media (max-width: 1024px) {
.glowGlitch--Default,
.presentation__Special .richText h3,
.product__Special .richText h3 {
font-size: 38px;
line-height: 0.95;
letter-spacing: -1.13px;
}
}
@-webkit-keyframes glitch2 {
0% {
text-shadow: 1px 0 0 red, -1px 0 0 #00f;
}
1% {
text-shadow: 1px 0 0 red, -1px 0 0 #00f;
}
2% {
text-shadow: 1px 0 0 red, -1px 0 0 #00f;
}
3% {
text-shadow: 1px 0 0 red, -1px 0 0 #00f;
}
4% {
text-shadow: 1px 0 0 red, -1px 0 0 #00f;
}
5% {
text-shadow: -1px 0 0 red, 1px 0 0 #00f;
}
6% {
text-shadow: -1px 0 0 red, 1px 0 0 #00f;
}
7% {
text-shadow: -1px 0 0 red, 1px 0 0 #00f;
}
8% {
text-shadow: -1px 0 0 red, 1px 0 0 #00f;
}
9% {
text-shadow: -1px 0 0 red, 1px 0 0 #00f;
}
10% {
text-shadow: -1px 0 0 red, 1px 0 0 #00f;
}
11% {
text-shadow: 0.5px 0 0 red, -0.5px 0 0 #0f0;
}
12% {
text-shadow: 0.5px 0 0 red, -0.5px 0 0 #0f0;
}
13% {
text-shadow: 0.5px 0 0 red, -0.5px 0 0 #0f0;
}
14% {
text-shadow: 0.5px 0 0 red, -0.5px 0 0 #0f0;
}
15% {
text-shadow: 0.5px 0 0 red, -0.5px 0 0 #0f0;
}
16% {
text-shadow: -1px 0 0 red, 1px 0 0 #0f0;
}
17% {
text-shadow: -1px 0 0 red, 1px 0 0 #0f0;
}
18% {
text-shadow: -1px 0 0 red, 1px 0 0 #0f0;
}
19% {
text-shadow: -1px 0 0 red, 1px 0 0 #0f0;
}
20% {
text-shadow: -1px 0 0 red, 1px 0 0 #0f0;
}
21% {
text-shadow: 0.7px 0 0 #00f, -0.7px 0 0 #0f0;
}
22% {
text-shadow: 0.7px 0 0 #00f, -0.7px 0 0 #0f0;
}
23% {
text-shadow: 0.7px 0 0 #00f, -0.7px 0 0 #0f0;
}
24% {
text-shadow: 0.7px 0 0 #00f, -0.7px 0 0 #0f0;
}
25% {
text-shadow: 0.7px 0 0 #00f, -0.7px 0 0 #0f0;
}
26% {
text-shadow: 0.7px 0 0 #00f, -0.7px 0 0 #0f0;
}
27% {
text-shadow: 0.7px 0 0 #00f, -0.7px 0 0 #0f0;
}
28% {
text-shadow: 0.7px 0 0 #00f, -0.7px 0 0 #0f0;
}
29% {
text-shadow: 0.7px 0 0 #00f, -0.7px 0 0 #0f0;
}
30% {
text-shadow: 0.7px 0 0 #00f, -0.7px 0 0 #0f0;
}
31% {
text-shadow: -1px 0 0 #00f, 1px 0 0 #0f0;
}
32% {
text-shadow: -1px 0 0 #00f, 1px 0 0 #0f0;
}
33% {
text-shadow: -1px 0 0 #00f, 1px 0 0 #0f0;
}
34% {
text-shadow: -1px 0 0 #00f, 1px 0 0 #0f0;
}
35% {
text-shadow: -1px 0 0 #00f, 1px 0 0 #0f0;
}
36% {
text-shadow: -1px 0 0 #00f, 1px 0 0 #0f0;
}
37% {
text-shadow: -1px 0 0 #00f, 1px 0 0 #0f0;
}
38% {
text-shadow: -1px 0 0 #00f, 1px 0 0 #0f0;
}
39% {
text-shadow: -1px 0 0 #00f, 1px 0 0 #0f0;
}
40% {
text-shadow: -1px 0 0 #00f, 1px 0 0 #0f0;
}
41% {
text-shadow: 50px 0 0 #00f, -50px 0 0 #0f0;
}
42% {
text-shadow: 0 0 0 #00f, 0 0 0 #0f0;
}
43% {
text-shadow: 0.5px 0 0 red, -0.5px 0 0 #0f0;
}
44% {
text-shadow: 0.5px 0 0 red, -0.5px 0 0 #0f0;
}
45% {
text-shadow: 0.5px 0 0 red, -0.5px 0 0 #0f0;
}
46% {
text-shadow: 0.5px 0 0 red, -0.5px 0 0 #0f0;
}
47% {
text-shadow: -1px 0 0 red, 1px 0 0 #0f0;
}
48% {
text-shadow: -1px 0 0 red, 1px 0 0 #0f0;
}
49% {
text-shadow: -1px 0 0 red, 1px 0 0 #0f0;
}
50% {
text-shadow: -1px 0 0 red, 1px 0 0 #0f0;
}
51% {
text-shadow: 1px 0 0 red, -1px 0 0 #00f;
}
52% {
text-shadow: 1px 0 0 red, -1px 0 0 #00f;
}
53% {
text-shadow: 1px 0 0 red, -1px 0 0 #00f;
}
54% {
text-shadow: 1px 0 0 red, -1px 0 0 #00f;
}
55% {
text-shadow: 1px 0 0 red, -1px 0 0 #00f;
}
56% {
text-shadow: -1px 0 0 red, 1px 0 0 #00f;
}
57% {
text-shadow: -1px 0 0 red, 1px 0 0 #00f;
}
58% {
text-shadow: -1px 0 0 red, 1px 0 0 #00f;
}
59% {
text-shadow: -1px 0 0 red, 1px 0 0 #00f;
}
60% {
text-shadow: -1px 0 0 red, 1px 0 0 #00f;
}
61% {
text-shadow: 10px 0 0 red, -10px 0 0 #0f0;
}
62% {
text-shadow: 0 0 0 red, 0 0 0 #0f0;
}
63% {
text-shadow: 0.5px 0 0 red, -0.5px 0 0 #00f;
}
64% {
text-shadow: 0.5px 0 0 red, -0.5px 0 0 #00f;
}
65% {
text-shadow: 0.5px 0 0 red, -0.5px 0 0 #00f;
}
66% {
text-shadow: 0.5px 0 0 red, -0.5px 0 0 #00f;
}
67% {
text-shadow: -1px 0 0 red, 1px 0 0 #00f;
}
68% {
text-shadow: -1px 0 0 red, 1px 0 0 #00f;
}
69% {
text-shadow: -1px 0 0 red, 1px 0 0 #00f;
}
70% {
text-shadow: -1px 0 0 red, 1px 0 0 #00f;
}
71% {
text-shadow: 30px 0 0 red, -30px 0 0 #00f;
}
72% {
text-shadow: 0 0 0 red, 0 0 0 #00f;
}
73% {
text-shadow: 1px 0 0 red, -1px 0 0 #00f;
}
74% {
text-shadow: 1px 0 0 red, -1px 0 0 #00f;
}
75% {
text-shadow: 1px 0 0 red, -1px 0 0 #00f;
}
76% {
text-shadow: 1px 0 0 red, -1px 0 0 #00f;
}
77% {
text-shadow: -1px 0 0 red, 1px 0 0 #00f;
}
78% {
text-shadow: -1px 0 0 red, 1px 0 0 #00f;
}
79% {
text-shadow: -1px 0 0 red, 1px 0 0 #00f;
}
80% {
text-shadow: -1px 0 0 red, 1px 0 0 #00f;
}
81% {
text-shadow: 0.5px 0 0 red, -0.5px 0 0 #0f0;
}
82% {
text-shadow: 0.5px 0 0 red, -0.5px 0 0 #0f0;
}
83% {
text-shadow: 0.5px 0 0 red, -0.5px 0 0 #0f0;
}
84% {
text-shadow: 0.5px 0 0 red, -0.5px 0 0 #0f0;
}
85% {
text-shadow: 0.5px 0 0 red, -0.5px 0 0 #0f0;
}
86% {
text-shadow: -1px 0 0 red, 1px 0 0 #0f0;
}
87% {
text-shadow: -1px 0 0 red, 1px 0 0 #0f0;
}
88% {
text-shadow: -1px 0 0 red, 1px 0 0 #0f0;
}
89% {
text-shadow: -1px 0 0 red, 1px 0 0 #0f0;
}
90% {
text-shadow: -1px 0 0 red, 1px 0 0 #0f0;
}
91% {
text-shadow: 60px 0 0 #0f0, -60px 0 0 #00f;
}
92% {
text-shadow: 0 0 0 #0f0, 0 0 0 #00f;
}
92% {
text-shadow: 0.7px 0 0 #00f, -0.7px 0 0 #0f0;
}
93% {
text-shadow: 0.7px 0 0 #00f, -0.7px 0 0 #0f0;
}
94% {
text-shadow: 0.7px 0 0 #00f, -0.7px 0 0 #0f0;
}
95% {
text-shadow: 0.7px 0 0 #00f, -0.7px 0 0 #0f0;
}
96% {
text-shadow: -1px 0 0 #00f, 1px 0 0 #0f0;
}
97% {
text-shadow: -1px 0 0 #00f, 1px 0 0 #0f0;
}
98% {
text-shadow: -1px 0 0 #00f, 1px 0 0 #0f0;
}
99% {
text-shadow: -1px 0 0 #00f, 1px 0 0 #0f0;
}
to {
text-shadow: -1px 0 0 #00f, 1px 0 0 #0f0;
}
}
@keyframes glitch2 {
0% {
text-shadow: 1px 0 0 red, -1px 0 0 #00f;
}
1% {
text-shadow: 1px 0 0 red, -1px 0 0 #00f;
}
2% {
text-shadow: 1px 0 0 red, -1px 0 0 #00f;
}
3% {
text-shadow: 1px 0 0 red, -1px 0 0 #00f;
}
4% {
text-shadow: 1px 0 0 red, -1px 0 0 #00f;
}
5% {
text-shadow: -1px 0 0 red, 1px 0 0 #00f;
}
6% {
text-shadow: -1px 0 0 red, 1px 0 0 #00f;
}
7% {
text-shadow: -1px 0 0 red, 1px 0 0 #00f;
}
8% {
text-shadow: -1px 0 0 red, 1px 0 0 #00f;
}
9% {
text-shadow: -1px 0 0 red, 1px 0 0 #00f;
}
10% {
text-shadow: -1px 0 0 red, 1px 0 0 #00f;
}
11% {
text-shadow: 0.5px 0 0 red, -0.5px 0 0 #0f0;
}
12% {
text-shadow: 0.5px 0 0 red, -0.5px 0 0 #0f0;
}
13% {
text-shadow: 0.5px 0 0 red, -0.5px 0 0 #0f0;
}
14% {
text-shadow: 0.5px 0 0 red, -0.5px 0 0 #0f0;
}
15% {
text-shadow: 0.5px 0 0 red, -0.5px 0 0 #0f0;
}
16% {
text-shadow: -1px 0 0 red, 1px 0 0 #0f0;
}
17% {
text-shadow: -1px 0 0 red, 1px 0 0 #0f0;
}
18% {
text-shadow: -1px 0 0 red, 1px 0 0 #0f0;
}
19% {
text-shadow: -1px 0 0 red, 1px 0 0 #0f0;
}
20% {
text-shadow: -1px 0 0 red, 1px 0 0 #0f0;
}
21% {
text-shadow: 0.7px 0 0 #00f, -0.7px 0 0 #0f0;
}
22% {
text-shadow: 0.7px 0 0 #00f, -0.7px 0 0 #0f0;
}
23% {
text-shadow: 0.7px 0 0 #00f, -0.7px 0 0 #0f0;
}
24% {
text-shadow: 0.7px 0 0 #00f, -0.7px 0 0 #0f0;
}
25% {
text-shadow: 0.7px 0 0 #00f, -0.7px 0 0 #0f0;
}
26% {
text-shadow: 0.7px 0 0 #00f, -0.7px 0 0 #0f0;
}
27% {
text-shadow: 0.7px 0 0 #00f, -0.7px 0 0 #0f0;
}
28% {
text-shadow: 0.7px 0 0 #00f, -0.7px 0 0 #0f0;
}
29% {
text-shadow: 0.7px 0 0 #00f, -0.7px 0 0 #0f0;
}
30% {
text-shadow: 0.7px 0 0 #00f, -0.7px 0 0 #0f0;
}
31% {
text-shadow: -1px 0 0 #00f, 1px 0 0 #0f0;
}
32% {
text-shadow: -1px 0 0 #00f, 1px 0 0 #0f0;
}
33% {
text-shadow: -1px 0 0 #00f, 1px 0 0 #0f0;
}
34% {
text-shadow: -1px 0 0 #00f, 1px 0 0 #0f0;
}
35% {
text-shadow: -1px 0 0 #00f, 1px 0 0 #0f0;
}
36% {
text-shadow: -1px 0 0 #00f, 1px 0 0 #0f0;
}
37% {
text-shadow: -1px 0 0 #00f, 1px 0 0 #0f0;
}
38% {
text-shadow: -1px 0 0 #00f, 1px 0 0 #0f0;
}
39% {
text-shadow: -1px 0 0 #00f, 1px 0 0 #0f0;
}
40% {
text-shadow: -1px 0 0 #00f, 1px 0 0 #0f0;
}
41% {
text-shadow: 50px 0 0 #00f, -50px 0 0 #0f0;
}
42% {
text-shadow: 0 0 0 #00f, 0 0 0 #0f0;
}
43% {
text-shadow: 0.5px 0 0 red, -0.5px 0 0 #0f0;
}
44% {
text-shadow: 0.5px 0 0 red, -0.5px 0 0 #0f0;
}
45% {
text-shadow: 0.5px 0 0 red, -0.5px 0 0 #0f0;
}
46% {
text-shadow: 0.5px 0 0 red, -0.5px 0 0 #0f0;
}
47% {
text-shadow: -1px 0 0 red, 1px 0 0 #0f0;
}
48% {
text-shadow: -1px 0 0 red, 1px 0 0 #0f0;
}
49% {
text-shadow: -1px 0 0 red, 1px 0 0 #0f0;
}
50% {
text-shadow: -1px 0 0 red, 1px 0 0 #0f0;
}
51% {
text-shadow: 1px 0 0 red, -1px 0 0 #00f;
}
52% {
text-shadow: 1px 0 0 red, -1px 0 0 #00f;
}
53% {
text-shadow: 1px 0 0 red, -1px 0 0 #00f;
}
54% {
text-shadow: 1px 0 0 red, -1px 0 0 #00f;
}
55% {
text-shadow: 1px 0 0 red, -1px 0 0 #00f;
}
56% {
text-shadow: -1px 0 0 red, 1px 0 0 #00f;
}
57% {
text-shadow: -1px 0 0 red, 1px 0 0 #00f;
}
58% {
text-shadow: -1px 0 0 red, 1px 0 0 #00f;
}
59% {
text-shadow: -1px 0 0 red, 1px 0 0 #00f;
}
60% {
text-shadow: -1px 0 0 red, 1px 0 0 #00f;
}
61% {
text-shadow: 10px 0 0 red, -10px 0 0 #0f0;
}
62% {
text-shadow: 0 0 0 red, 0 0 0 #0f0;
}
63% {
text-shadow: 0.5px 0 0 red, -0.5px 0 0 #00f;
}
64% {
text-shadow: 0.5px 0 0 red, -0.5px 0 0 #00f;
}
65% {
text-shadow: 0.5px 0 0 red, -0.5px 0 0 #00f;
}
66% {
text-shadow: 0.5px 0 0 red, -0.5px 0 0 #00f;
}
67% {
text-shadow: -1px 0 0 red, 1px 0 0 #00f;
}
68% {
text-shadow: -1px 0 0 red, 1px 0 0 #00f;
}
69% {
text-shadow: -1px 0 0 red, 1px 0 0 #00f;
}
70% {
text-shadow: -1px 0 0 red, 1px 0 0 #00f;
}
71% {
text-shadow: 30px 0 0 red, -30px 0 0 #00f;
}
72% {
text-shadow: 0 0 0 red, 0 0 0 #00f;
}
73% {
text-shadow: 1px 0 0 red, -1px 0 0 #00f;
}
74% {
text-shadow: 1px 0 0 red, -1px 0 0 #00f;
}
75% {
text-shadow: 1px 0 0 red, -1px 0 0 #00f;
}
76% {
text-shadow: 1px 0 0 red, -1px 0 0 #00f;
}
77% {
text-shadow: -1px 0 0 red, 1px 0 0 #00f;
}
78% {
text-shadow: -1px 0 0 red, 1px 0 0 #00f;
}
79% {
text-shadow: -1px 0 0 red, 1px 0 0 #00f;
}
80% {
text-shadow: -1px 0 0 red, 1px 0 0 #00f;
}
81% {
text-shadow: 0.5px 0 0 red, -0.5px 0 0 #0f0;
}
82% {
text-shadow: 0.5px 0 0 red, -0.5px 0 0 #0f0;
}
83% {
text-shadow: 0.5px 0 0 red, -0.5px 0 0 #0f0;
}
84% {
text-shadow: 0.5px 0 0 red, -0.5px 0 0 #0f0;
}
85% {
text-shadow: 0.5px 0 0 red, -0.5px 0 0 #0f0;
}
86% {
text-shadow: -1px 0 0 red, 1px 0 0 #0f0;
}
87% {
text-shadow: -1px 0 0 red, 1px 0 0 #0f0;
}
88% {
text-shadow: -1px 0 0 red, 1px 0 0 #0f0;
}
89% {
text-shadow: -1px 0 0 red, 1px 0 0 #0f0;
}
90% {
text-shadow: -1px 0 0 red, 1px 0 0 #0f0;
}
91% {
text-shadow: 60px 0 0 #0f0, -60px 0 0 #00f;
}
92% {
text-shadow: 0 0 0 #0f0, 0 0 0 #00f;
}
92% {
text-shadow: 0.7px 0 0 #00f, -0.7px 0 0 #0f0;
}
93% {
text-shadow: 0.7px 0 0 #00f, -0.7px 0 0 #0f0;
}
94% {
text-shadow: 0.7px 0 0 #00f, -0.7px 0 0 #0f0;
}
95% {
text-shadow: 0.7px 0 0 #00f, -0.7px 0 0 #0f0;
}
96% {
text-shadow: -1px 0 0 #00f, 1px 0 0 #0f0;
}
97% {
text-shadow: -1px 0 0 #00f, 1px 0 0 #0f0;
}
98% {
text-shadow: -1px 0 0 #00f, 1px 0 0 #0f0;
}
99% {
text-shadow: -1px 0 0 #00f, 1px 0 0 #0f0;
}
to {
text-shadow: -1px 0 0 #00f, 1px 0 0 #0f0;
}
}
.homepage__FeatureItemText .glowGlitch {
display: inline;
}
.newsletter__Default .glowGlitch {
display: inline;
}
.presentation__Special .richText .presentation__Wrapper h3,
.presentation__Wrapper .glowGlitch--Default,
.presentation__Wrapper .presentation__Special .richText h3,
.presentation__Wrapper .product__Special .richText h3,
.product__Special .richText .presentation__Wrapper h3 {
display: block !important;
margin-bottom: 90px;
}
.presentation__Special .richText .product__Sliders h3,
.product__Sliders .glowGlitch--Default,
.product__Sliders .presentation__Special .richText h3,
.product__Sliders .product__Special .richText h3,
.product__Special .richText .product__Sliders h3 {
margin: 100px 0 140px;
display: block !important;
}
@mngyuan
Copy link
Author

mngyuan commented Nov 29, 2022

from https://www.greyp.com/en/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment