apple-intelligence-glow/dist/css/border-glow.css

A JavaScript and CSS implementation of the Apple Intelligence border glow effect

:root{--pulse-duration-1:4s;--pulse-duration-2:4.2s;--pulse-duration-3:3.8s;--color-purple:rgba(153,0,255,.8);--color-pink:rgba(255,0,102,.8);--color-orange:rgba(255,102,0,.8);--color-blue:rgba(0,153,255,.8);--color-magenta:rgba(255,0,204,.8);--color-navy:rgba(0,51,255,.8);--color-green:rgba(102,255,51,.8);--color-lime:rgba(204,255,51,.8);--color-yellow:rgba(255,204,0,.8)}.border-glow-container{border-radius:50px;contain:layout style paint;height:700px;margin:5px auto;max-width:380px;overflow:hidden;position:relative;width:100%}.border-glow-small{height:550px;max-width:300px}.border-glow-tablet{border-radius:30px;height:700px;max-width:500px}.border-glow-laptop{border-radius:0;height:500px;max-width:800px}.content-area{align-items:center;background-color:#000;bottom:4px;display:flex;flex-direction:column;font-size:1.5rem;justify-content:center;left:4px;overflow:hidden;position:absolute;right:4px;top:4px;z-index:10}.border-glow-small .content-area,.content-area{border-radius:47px}.border-glow-tablet .content-area{border-radius:27px}.border-glow-laptop .content-area{border-radius:0}.glow-layer{background-clip:content-box,border-box;background-origin:border-box;height:calc(100% + 20px);left:-10px;mix-blend-mode:screen;opacity:.9;position:absolute;top:-10px;width:calc(100% + 20px)}.border-glow-small .glow-layer,.glow-layer{border-radius:60px}.border-glow-tablet .glow-layer{border-radius:40px}.border-glow-laptop .glow-layer{border-radius:0}.glow-layer-1{filter:blur(5px);z-index:1}.glow-layer-2{filter:blur(10px);z-index:2}.glow-layer-3{filter:blur(15px);z-index:3}.glow-layer-4{filter:blur(20px);z-index:4}.color-scheme-default .glow-layer-1{background:linear-gradient(90deg,#60f,#90f 20%,#c0f 40%,#f06 60%,#f60 80%,#60f)}.color-scheme-default .glow-layer-2{background:linear-gradient(180deg,#90f,#c0f 20%,#f06 40%,#f60 60%,#fc0 80%,#90f)}.color-scheme-default .glow-layer-3{background:linear-gradient(45deg,#c0f,#f06 20%,#f60 40%,#fc0 60%,#60f 80%,#c0f)}.color-scheme-default .glow-layer-4{background:linear-gradient(-45deg,#f06,#f60 20%,#fc0 40%,#60f 60%,#90f 80%,#f06)}.color-scheme-blue .glow-layer-1{background:linear-gradient(90deg,#03f,#09f 20%,#0cf 40%,#f0c 60%,#f06 80%,#03f)}.color-scheme-blue .glow-layer-2{background:linear-gradient(180deg,#09f,#0cf 20%,#f0c 40%,#f06 60%,#f30 80%,#09f)}.color-scheme-blue .glow-layer-3{background:linear-gradient(45deg,#0cf,#f0c 20%,#f06 40%,#f30 60%,#03f 80%,#0cf)}.color-scheme-blue .glow-layer-4{background:linear-gradient(-45deg,#f0c,#f06 20%,#f30 40%,#03f 60%,#09f 80%,#f0c)}.color-scheme-green .glow-layer-1{background:linear-gradient(90deg,#0f3,#6f3 20%,#9f3 40%,#cf3 60%,#fc0 80%,#0f3)}.color-scheme-green .glow-layer-2{background:linear-gradient(180deg,#6f3,#9f3 20%,#cf3 40%,#fc0 60%,#f90 80%,#6f3)}.color-scheme-green .glow-layer-3{background:linear-gradient(45deg,#9f3,#cf3 20%,#fc0 40%,#f90 60%,#0f3 80%,#9f3)}.color-scheme-green .glow-layer-4{background:linear-gradient(-45deg,#cf3,#fc0 20%,#f90 40%,#0f3 60%,#6f3 80%,#cf3)}@keyframes moveGradient1{0%{background-position:0 0}to{background-position:200% 0}}@keyframes moveGradient2{0%{background-position:0 0}to{background-position:0 200%}}@keyframes moveGradient3{0%{background-position:0 0}to{background-position:200% 200%}}@keyframes moveGradient4{0%{background-position:0 0}to{background-position:200% -200%}}:root{--gradient-duration-1:8s;--gradient-duration-2:10s;--gradient-duration-3:12s;--gradient-duration-4:14s}.animated .glow-layer-1{animation:moveGradient1 var(--gradient-duration-1) linear infinite}.animated .glow-layer-1,.animated .glow-layer-2{background-size:200% 200%;will-change:background-position}.animated .glow-layer-2{animation:moveGradient2 var(--gradient-duration-2) linear infinite}.animated .glow-layer-3{animation:moveGradient3 var(--gradient-duration-3) linear infinite}.animated .glow-layer-3,.animated .glow-layer-4{background-size:200% 200%;will-change:background-position}.animated .glow-layer-4{animation:moveGradient4 var(--gradient-duration-4) linear infinite}.paused .glow-layer-1,.paused .glow-layer-2,.paused .glow-layer-3,.paused .glow-layer-4{animation-play-state:paused}
/*# sourceMappingURL=border-glow.css.map */