File size: 4,404 Bytes
65d68f5 | 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 138 | .border-glow-card {
--edge-proximity: 0;
--cursor-angle: 45deg;
--edge-sensitivity: 30;
--color-sensitivity: calc(var(--edge-sensitivity) + 20);
--border-radius: 28px;
--glow-padding: 40px;
--cone-spread: 25;
position: relative;
border-radius: var(--border-radius);
isolation: isolate;
transform: translate3d(0, 0, 0.01px);
display: grid;
border: 1px solid rgb(255 255 255 / 15%);
background: var(--card-bg, #030303);
overflow: visible;
box-shadow:
rgba(0, 0, 0, 0.1) 0px 1px 2px,
rgba(0, 0, 0, 0.1) 0px 2px 4px,
rgba(0, 0, 0, 0.1) 0px 4px 8px,
rgba(0, 0, 0, 0.1) 0px 8px 16px,
rgba(0, 0, 0, 0.1) 0px 16px 32px,
rgba(0, 0, 0, 0.1) 0px 32px 64px;
}
.border-glow-card::before,
.border-glow-card::after,
.border-glow-card > .edge-light {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
transition: opacity 0.25s ease-out;
z-index: -1;
}
.border-glow-card:not(:hover):not(.sweep-active)::before,
.border-glow-card:not(:hover):not(.sweep-active)::after,
.border-glow-card:not(:hover):not(.sweep-active) > .edge-light {
opacity: 0;
transition: opacity 0.75s ease-in-out;
}
.border-glow-card::before {
border: 1px solid transparent;
background:
linear-gradient(var(--card-bg, #030303) 0 100%) padding-box,
linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box,
var(--gradient-one) border-box,
var(--gradient-two) border-box,
var(--gradient-three) border-box,
var(--gradient-four) border-box,
var(--gradient-five) border-box,
var(--gradient-six) border-box,
var(--gradient-seven) border-box,
var(--gradient-base) border-box;
opacity: calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
mask-image:
conic-gradient(
from var(--cursor-angle) at center,
black calc(var(--cone-spread) * 1%),
transparent calc((var(--cone-spread) + 15) * 1%),
transparent calc((100 - var(--cone-spread) - 15) * 1%),
black calc((100 - var(--cone-spread)) * 1%)
);
}
.border-glow-card::after {
border: 1px solid transparent;
background:
var(--gradient-one) padding-box,
var(--gradient-two) padding-box,
var(--gradient-three) padding-box,
var(--gradient-four) padding-box,
var(--gradient-five) padding-box,
var(--gradient-six) padding-box,
var(--gradient-seven) padding-box,
var(--gradient-base) padding-box;
mask-image:
linear-gradient(to bottom, black, black),
radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);
mask-composite: subtract, add, add, add, add, add;
opacity: calc(var(--fill-opacity, 0.22) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
mix-blend-mode: soft-light;
}
.border-glow-card > .edge-light {
inset: calc(var(--glow-padding) * -1);
pointer-events: none;
z-index: 1;
mask-image:
conic-gradient(
from var(--cursor-angle) at center,
black 2.5%,
transparent 10%,
transparent 90%,
black 97.5%
);
opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
mix-blend-mode: plus-lighter;
}
.border-glow-card > .edge-light::before {
content: "";
position: absolute;
inset: var(--glow-padding);
border-radius: inherit;
box-shadow:
inset 0 0 0 1px var(--glow-color),
inset 0 0 1px 0 var(--glow-color-60),
inset 0 0 3px 0 var(--glow-color-50),
inset 0 0 6px 0 var(--glow-color-40),
inset 0 0 15px 0 var(--glow-color-30),
inset 0 0 25px 2px var(--glow-color-20),
inset 0 0 50px 2px var(--glow-color-10),
0 0 1px 0 var(--glow-color-60),
0 0 3px 0 var(--glow-color-50),
0 0 6px 0 var(--glow-color-40),
0 0 15px 0 var(--glow-color-30),
0 0 25px 2px var(--glow-color-20),
0 0 50px 2px var(--glow-color-10);
}
.border-glow-inner {
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
z-index: 1;
border-radius: inherit;
}
|