Special Gradient Border Effect
I'm new to the server so I apologize if this is the wrong channel.
I'm looking to make this border effect in pure CSS. Any ideas?
14 Replies
if you want it somewhat interactive, to follow the cursor, you will have to touch some js.
also next time this is probably the #front-end
Pseudo-element. I believe KP has a video on a creating a glowing animated bg, I am not sure it’s pure css
I dont want it to be animated just the general shape and color
@Nuffzo interesting topic thou . Could you than share the source ?
I saw a video about dark mode and how to use it efficiently and make it actually look good, and in the section about layout cards she showed that. I thought it looked really cool and wanted to recreate it in CSS
This is the video 👇
https://www.youtube.com/watch?v=6U9iC-c15AI
Juxtopposed
YouTube
Rise of the Dark Mode
In this video, we'll talk about colors one more time, but with a focus on dark mode designs.
// ✨ Try your dark mode colors on a real website:
https://realtimecolors.com
// ✨ Dark mode design inspirations:
https://www.darkmodedesign.com/
// ✨ Become a supporter:
https://ko-fi.com/juxtopposedme
// ✨ Let's connect:
Twitter: https://twitter.com...
It doesn't include the topic thou 🥸
yah but i really wanna recreate the effect
in css
Wow that is actually pretty close. I right now im trying to find a way to make the border have an ambient glow around the whole border but is masked to stay inside the border
I'm not sure what you mean. Do you want the border color to be splotchier?
Kevin Powell
YouTube
Create an animated, glowing, gradient border with CSS
Inspired by a codepen by Gayane Gasparyan - https://codepen.io/gayane-gasparyan/pen/jOmaBQK - I took my own attempt to create a rotating gradient border, including a nice soft glow.
To do it, I use @property, which doesn't have fantastic browser support, but near the end of the video I look at why that's not really a big deal 🙂
🔗 Links
✅ My f...
Kevin Powell
YouTube
Animated Glowing Border // Easy to Customize CSS Effect
I was inspired to try and recreate a Dribble shot by Aaron Iker - https://dribbble.com/shots/17674758-Button-Glow
🔗 Links
✅ The Dribbble shot that inspired this: https://dribbble.com/shots/17674758-Button-Glow
✅ Conic CSS by Adam Argyle: https://www.conic.style/
✅ The finished code: https://codepen.io/kevinpowell/pen/rNrdzdx
⌚ Timestamps
00:00...
@Nuffzo I've created something similar. You can tweak my codepen or fork it to your liking:
https://codepen.io/i4mabdul/pen/QWVYzeO
Nice! The transparency really makes it look “glowy” without even adding a filter!
Hyperplexed
YouTube
You Need This Hover Effect On Your Site ASAP (CSS / JS)
#tutorial #codepen
Watch as I show to how to recreate a sweet hover effect (from linear.app) that can span across multiple cards at the same time!
Support the channel: https://ko-fi.com/hyperplexed (accepts PayPal, card, etc).
CodePen: https://cdpn.io/MWQeYLW
Linear: https://linear.app/features
Tools used: HTML, CSS, JavaScript
Music Credi...