if you are adding z-index:-1 to the pseudo element you need to add z-index:0 to the main element to avoid the issue OR don't use z-index at all and add pointer-events:none to the pseudo element
Am a young programmer from Ghana, having just switched from the world of System Administration and Networking, I am enjoying this journey so far and can't wait to take my place in it.
Passionate, positive-minded, Sr Front-end Eng @ Preply (Design System) / Advisor @ Plannix / ex platform team / ex team leader / Speaker / Instructor / Writer / Remote worker
Location
Lecco, Italy
Education
Bachelor's degree, Communication design - High School Diploma, Informatic Technologies
Pronouns
he/him
Work
Senior Front-end Engineer/Tech lead at Preply (Design System)
A front-end developer from Mar del Plata, Argentina. Passionate about CSS, accessibility, and JS. Currently working on "just a small fix", as I've been doing for the last 15 years.
Front-End web application development student || curious coder enthusiast || loves to cook (foodie), listening to great music, photography, and travel.
Holla! I'm Michael and I double as a software developer and technical writer. When I'm not slapping the keys on my keyboard to write code or docs, I either sleep or spend time browsing the internet.
I need to make a div with glassy background and rounded borders with gradient. Is there some way I could do that without using any background-padding technique.
Thanks
thank a lot
This helped enormously, thank you!
Nice article, and nice seeing you here :)
thanks :) will try to bring some tricks and some hacks to dev.to ;)
Thanks, it could work in some situations, although two issues:
if you are adding z-index:-1 to the pseudo element you need to add z-index:0 to the main element to avoid the issue OR don't use z-index at all and add pointer-events:none to the pseudo element
Thank you! That does fix it!
But what if i need to make a background colour as well? for instance, gradient as well
in this case, you don't need mask or pseudo element simply do
This is SO much cleaner than all the "gradient border"-articles you find around the web — love the 4-char alpha-hex. Thank You!
thanks for the tip, will try.. my designer made this, at first i tried it with a border-image-source but it doesn't work with border-radius, of course
Well i tried what you said, but it looks very much differently from what i want to archive and it's so sad.
PS: i decided simply to export the background with border as a background (svg), the simplest way
Thus just saved me more digging, thanks muchacho
I've been struggling with designing gradient-border buttons with a transparent background, so I came up with a solution.
With this approach, even a video border is possible.
Check it out: codepen.io/rtredes2/pen/wBvzLYa
Thank you so much! Even if I ended up not using your solution, you helped me find out the best way to do this dev.to/noriste/production-grade-gr... 😊
Nice! thanks.
Thanks for this but doesn't work in Safari, only Chrome and Firefox
Great article, so good to see you here!
thanks :)
Awesome!!
So pretty!
is there website (like (JavaScript.info) ) for CSS ❓❓❓
Maybe the MDN website: developer.mozilla.org/en-US/docs/W...
You might just love css-tricks.com 😉
Nice
Where can we find pre-made gradients?
what kind of pre-made gradients?
I mean gradient which made by someone to use. Ready to use gradients.
After some digging around the internet, I found this
eggradients.com/
I need to make a div with glassy background and rounded borders with gradient. Is there some way I could do that without using any background-padding technique.
Jenius! Thanks bro, your explanation has solved my problem.
creating shadow gradient use this thing
Yes, quite easy by adding a blur filter to the pseudo element ;)
Thanks so much bro <3