Create a reflective glow effect with CSS
Starting with something similar to what I covered in this video, https://youtu.be/8_NQ7ARXz8c, I then try to create a reflective effect on some borders on the top and bottom of the buttons.
🔗 Links
✅ The video looking at this effect: https://youtu.be/8_NQ7ARXz8c
✅ The finished code: https://codepen.io/editor/kevinpowell/pen/019c8ffa-ca45-753e-9059-c942d1ce20ba/991be57f229078941ecc52c3ffe45e3b
✅ The inspiration: https://dribbble.com/shots/23129994-Glassy-button
⌚ Timestamps
00:00 - Introduction
01:00 - what we are starting with
01:45 - setting up the border on the top and bottom
03:00 - up…
Watch on YouTube ↗
(saves to browser)
Chapters (6)
Introduction
1:00
what we are starting with
1:45
setting up the border on the top and bottom
3:00
updating the anchor and positioning
6:25
making the glow with a radial gradient
12:00
improving the transition
DeepCamp AI