Enea Xharja Logo

Border Gradient

html
1<div>
2 <p>Text wrapped by an animated border!</p>
3</div>
css
1body {
2 background-color: #000;
3}
4
5/* define animated gradient */
6@keyframes animatedGradient {
7 0% {
8 background-position: 0% 50%;
9 }
10 50% {
11 background-position: 100% 50%;
12 }
13 100% {
14 background-position: 0% 50%;
15 }
16}
17
18div {
19 position: relative;
20}
21div:after {
22 content: '';
23 position: absolute;
24 top: calc(-1 * 2px);
25 left: calc(-1 * 2px);
26 height: calc(100% + 2px * 2);
27 width: calc(100% + 2px * 2);
28 background: linear-gradient(45deg, #3ddc84, #4285f4);
29 border-radius: 0.55rem;
30 z-index: -1;
31 background-size: 300% 300%;
32
33 /* make border blink */
34 animation: animatedGradient 3s ease alternate infinite;
35}
36
37p {
38 font-size: 40px;
39 padding: 20px;
40 text-align: center;
41 border-radius: 0.55rem;
42 background-color: #1c1c1c;
43 color: #fff;
44 border: 1px solid transparent;
45}
© 2021 Enea Xharja