How to create a GRADIENT BORDER in CSS Tutorial

✌️ Use our discount code CODING2GO to get 10% off on all web hosting packages with a duration of 12 months or more

In this HTML and CSS Tutorial you will learn how to apply a gradient to a border and how to create a glow gradient hover effect with the box-shadow property. This modern CSS button design can be implemented on any website you want. Since it is not possible to use the linear-gradient() method on the border property or the box-shadow, we are going to use a ::after pseudo-element to create the gradient border.

#webdevelopment #csshovereffect #csstutorial

Contents of this video:
- How to create a gradient border in css
- How to use the ::after pseudo-element in css
- How to use the linear-gradient method in css
- How to create a button hover effect
- How to create a glow effect in css
- How to apply a gradient to a shadow in css

👍 Like and Subscribe if you enjoyed the video 😉

[ZAKI-ksqj]

3:08 can somebody explain when we set the z-index to zero in the hover part why the text wasn't covered by the pseudo element?

[sublimemmNoLink]

Just FYI to everyone, magic numbering the width and height is a pretty bad solution and you would need different magic numbers for every button. If there is more text in the button it will be wider and give you more border on the x axis, so you'll have to lower your magic number.

A much... much better approach is to use negative margin,

button::after{
content: '';
position: absolute;
inset: 0;
margin: -0.2rem;
border-radius: 1000px;
background-image: linear-gradient(to bottom right, #008cff, #e100ff);
z-index: -1;
}

this button will have the same border thickness, no matter how tall or wide the button is.

instead of width and height of 100% btw, just use inset: 0, it means the same thing but is less code.

[jhannes]

what if you wantet the contentof the button to have an opacity, but still have a linear gradient border?

[IslamicReminder]

i did the same thing but it is not showing my border image why?

[Adarsh-dy]

how do you able to make this types of css bro this is increadable plese let me know how do you these much proficiency in css

[yamigamer]

Can u use transition 0.5 or doesn't work

[mr.k_]

How can we do transition with gradient?

[noumbissistael]

I didn't understand the z-index of 0 please

But it's an awesome video

[oppenheim]

can u make it transparent ? i mean the bg transparent

[ndeyamienjie]

it worked on my computer but not on my laptop, but still thx for the vid

[xa--animesh]

It would be really great if u could share the source code so that we can take a look at it

[ripisdead]

why doing this when u can do border image?

[ADITYAAAA]

try this


body {
background-color: #0b0b0b;
padding: 0;
margin: 0;
height: 100vh;
color: white;
display: flex;
justify-content: center;
align-items: center;
}

.btn {
--radius: 2rem;
padding-inline: 2.3rem;
padding-block: 1.2rem;
border-radius: var(--radius);
border: none;
background-color: #333;
color: inherit;
font-size: 1.2rem;
cursor: pointer;
position: relative;
display: grid;
place-items: center;
transition: background-color .2s ease;
}
.btn:before, .btn:after {
border-radius: calc(var(--radius) + .2rem);
position: absolute;
content: "";
width: calc(100% + .4rem);
height: calc(100% + .4rem);
background-image: linear-gradient(45deg, blue, purple);
z-index: -1;
}
.btn:after {
z-index: -2;
transition: filter .2s ease;
}
.btn:hover {
background-color: transparent;
&::after {
filter: blur(2rem);
}
}