Menu
I'm using border-left: groove on an element but I want the border to "fade" into the background as it's about to end at the bottom.
I hope I'm making sense. How would I achieve something to that effect?
535
You can specify gradients for colours in certain circumstances in CSS3, and of course borders can be set to a colour, so you should be able to use a gradient as a border colour. This would include the option of specifying a transparent colour, which means you should be able to achieve the effect you're after.
If you want to visually blur the border of an element, use a pseudo-element, put it behind the parent element with z-index , apply a transparent border, add the background-clip , filter , and clip-path properties.
To show gradients for a border with CSS you can use the border-image property. It allows setting gradient values in the same way as the background-image property. Besides the border-image property, you should specify additional properties to actually show border gradient.
You could also use box-shadow property with higher value of blur and rgba() color to set opacity level. Sounds like a better choice in your case.
box-shadow: 0 30px 40px rgba(0,0,0,.1); You can specify gradients for colours in certain circumstances in CSS3, and of course borders can be set to a colour, so you should be able to use a gradient as a border colour. This would include the option of specifying a transparent colour, which means you should be able to achieve the effect you're after.
However, I've never seen it used, and I don't know how well supported it is by current browsers. You'll certainly need to accept that at least some of your users won't be able to see it.
A quick google turned up these two pages which should help you on your way:
Hope that helps.
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
