So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at certain points, so below is everything you will need!
You can download the complete template here
The Following code goes into the Card Container ( OUT GLOW ONLY – Animated Border ):
selector{
--first-color: #B96DED;
--second-color: #6DEDA3;
--third-color: #EDBE6D;
--size-of-blur : 40px;
--spin-speed : 2.5s;
}
@property --rotate {
syntax: "<angle>";
initial-value: 132deg;
inherits: false;
}
selector::before, selector::after{
opacity: 0;
content: "";
transition: all 0.8s ease-in-out;
}
selector::before, selector::after{
position: absolute;
z-index: -1;
background-image: linear-gradient(
var(--rotate)
, var(--first-color), var(--second-color) 45%, var(--third-color));
animation: spin var(--spin-speed) linear infinite;
opacity: 1;
}
selector::after {
height: 100%;
width: 100%;
transform: scale(0.9);
filter: blur(var(--size-of-blur));
}
@keyframes spin {
0% {
--rotate: 0deg;
}
100% {
--rotate: 360deg;
}
}
The Following code goes into the Card Container ( OUT GLOW ONLY – On Hover ):
selector{
--first-color: #B96DED;
--second-color: #6DEDA3;
--third-color: #EDBE6D;
--size-of-blur : 40px;
--spin-speed : 2.5s;
transition: all 0.8s ease-in-out!important;
}
@property --rotate {
syntax: "<angle>";
initial-value: 132deg;
inherits: false;
}
selector::before, selector::after{
opacity: 0;
content: "";
position: absolute;
transition: all 0.8s ease-in-out!important;
}
selector:hover::before, selector:hover::after{
z-index: -1;
background-image: linear-gradient(
var(--rotate)
, var(--first-color), var(--second-color) 45%, var(--third-color));
animation: spin var(--spin-speed) linear infinite;
opacity: 1;
}
selector:hover::after {
height: 100%;
width: 100%;
transform: scale(0.9);
filter: blur(var(--size-of-blur));
}
@keyframes spin {
0% {
--rotate: 0deg;
}
100% {
--rotate: 360deg;
}
}
The Following code goes into the Card Container ( WHOLE CARD GLOW – On Hover ):
selector{
--first-color: #B96DED;
--second-color: #6DEDA3;
--third-color: #EDBE6D;
--size-of-blur : 40px;
--spin-speed : 2.5s;
transition: all 0.8s ease-in-out!important;
}
@property --rotate {
syntax: "<angle>";
initial-value: 132deg;
inherits: false;
}
selector::before, selector::after{
opacity: 0;
content: "";
position: absolute;
transition: all 0.8s ease-in-out!important;
}
selector:hover::before, selector:hover::after{
z-index: -1;
background-image: linear-gradient(
var(--rotate)
, var(--first-color), var(--second-color) 45%, var(--third-color));
animation: spin var(--spin-speed) linear infinite;
opacity: 1;
}
selector > div:hover{
background-color: transparent!important;
transition: all 0.8s ease-in-out!important;
}
selector:hover::after {
height: 100%;
width: 100%;
transform: scale(0.9);
filter: blur(var(--size-of-blur));
}
@keyframes spin {
0% {
--rotate: 0deg;
}
100% {
--rotate: 360deg;
}
}
The Following code goes into the Card Container ( WHOLE CARD GLOW – On Hover, PLUS Animated border ):
selector{
--first-color: #B96DED;
--second-color: #6DEDA3;
--third-color: #EDBE6D;
--size-of-blur : 40px;
--spin-speed : 2.5s;
}
@property --rotate {
syntax: "<angle>";
initial-value: 132deg;
inherits: false;
}
selector::before, selector::after{
opacity: 0;
content: "";
transition: all 0.8s ease-in-out;
}
selector::before, selector::after{
position: absolute;
z-index: -1;
background-image: linear-gradient(
var(--rotate)
, var(--first-color), var(--second-color) 45%, var(--third-color));
animation: spin var(--spin-speed) linear infinite;
opacity: 1;
}
selector > div:hover{
background-color: transparent!important;
transition: all 0.8s ease-in-out!important;
}
selector::after {
height: 100%;
width: 100%;
transform: scale(0.9);
filter: blur(var(--size-of-blur));
}
@keyframes spin {
0% {
--rotate: 0deg;
}
100% {
--rotate: 360deg;
}
}