CSS-only Shining Stroke ✨!

This content originally appeared on DEV Community and was authored by Ali Shata

Inspired by a Post on X/Twitter on creating a shining stroke in figma, I thought that I can create it using CSS multi layered background images that are blended on a color-dodge mode, and masking them along with clipping those masks and compositing them in subtract to show only the border, also used css custom properties to manage the gradient direction, border-size, square size

This content originally appeared on DEV Community and was authored by Ali Shata

Print Share Comment Cite Upload Translate Updates

APA

Ali Shata | Sciencx (2024-09-20T19:33:02+00:00) CSS-only Shining Stroke ✨!. Retrieved from https://www.scien.cx/2024/09/20/css-only-shining-stroke-%e2%9c%a8/

MLA

" » CSS-only Shining Stroke ✨!." Ali Shata | Sciencx - Friday September 20, 2024, https://www.scien.cx/2024/09/20/css-only-shining-stroke-%e2%9c%a8/

HARVARD

Ali Shata | Sciencx Friday September 20, 2024 » CSS-only Shining Stroke ✨!., viewed ,<https://www.scien.cx/2024/09/20/css-only-shining-stroke-%e2%9c%a8/>

VANCOUVER

Ali Shata | Sciencx - » CSS-only Shining Stroke ✨!. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/09/20/css-only-shining-stroke-%e2%9c%a8/

CHICAGO

" » CSS-only Shining Stroke ✨!." Ali Shata | Sciencx - Accessed . https://www.scien.cx/2024/09/20/css-only-shining-stroke-%e2%9c%a8/

IEEE

" » CSS-only Shining Stroke ✨!." Ali Shata | Sciencx [Online]. Available: https://www.scien.cx/2024/09/20/css-only-shining-stroke-%e2%9c%a8/. [Accessed: ]

rf:citation

» CSS-only Shining Stroke ✨! | Ali Shata | Sciencx | https://www.scien.cx/2024/09/20/css-only-shining-stroke-%e2%9c%a8/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.