| .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; |
| } |
|
|
