#cssgradient — Public Fediverse posts

Rainbow 🌈 hue animation with the tiniest bit of pure #CSS, explainedd in detail: https://www.reddit.com/r/css/comments/1tuh7ef/comment/op9setj/

Live on @codepen https://codepen.io/thebabydino/pen/VYmQORb

#cssGradient #rainbow #coding #frontend #wen #dev #webDev #webDevelopment #code

Rainbow 🌈 hue animation with the tiniest bit of pure #CSS, explainedd in detail: https://www.reddit.com/r/css/comments/1tuh7ef/comment/op9setj/

Live on @codepen https://codepen.io/thebabydino/pen/VYmQORb

#cssGradient #rainbow #coding #frontend #wen #dev #webDev #webDevelopment #code

Just noticed this little @codepen demo got featured:

https://codepen.io/thebabydino/pen/XJNpeYL

Detailed explanation for the how behind the mathy solution in this thread 👉 https://mastodon.social/@anatudor/116594229219732729

#CSS #cssGradient #code #coding #web #dev #webDev #webDevelopment #frontend #Maths #cssMaths

Just noticed this little @codepen demo got featured:

https://codepen.io/thebabydino/pen/XJNpeYL

Detailed explanation for the how behind the mathy solution in this thread 👉 https://mastodon.social/@anatudor/116594229219732729

#CSS #cssGradient #code #coding #web #dev #webDev #webDevelopment #frontend #Maths #cssMaths

That is, we need to add:
i*2*α_dx

If k > 1, then we need to add half a turn as well, that is:
round(down, k)*180°

Adding these to the angular progress along the edge, we get the conic-gradient angle producing a point that moves at constant speed along the perimeter.

#CSS #cssGradient #code #coding #web #dev #webDev #webDevelopment #frontend #Maths #cssMaths

That is, we need to add:
i*2*α_dx

If k > 1, then we need to add half a turn as well, that is:
round(down, k)*180°

Adding these to the angular progress along the edge, we get the conic-gradient angle producing a point that moves at constant speed along the perimeter.

#CSS #cssGradient #code #coding #web #dev #webDev #webDevelopment #frontend #Maths #cssMaths

If progress at the bottom left corner (= at half the perimeter starting from the top right corner) is 1, then progress at the bottom right corner is the height 100cqh over half the perimeter (one height 100cqh plus one width 100cqw):

f = 100cqh/(100cqh + 100cqw)

Dividing lengths is supported by Safari & Chrome + we have a Firefox fallback https://frontendmasters.com/blog/count-auto-fill-columns/#getting-the-number-of-columns

#CSS #cssGradient #code #coding #web #dev #webDev #webDevelopment #frontend #Maths #cssMaths

If progress at the bottom left corner (= at half the perimeter starting from the top right corner) is 1, then progress at the bottom right corner is the height 100cqh over half the perimeter (one height 100cqh plus one width 100cqw):

f = 100cqh/(100cqh + 100cqw)

Dividing lengths is supported by Safari & Chrome + we have a Firefox fallback https://frontendmasters.com/blog/count-auto-fill-columns/#getting-the-number-of-columns

#CSS #cssGradient #code #coding #web #dev #webDev #webDevelopment #frontend #Maths #cssMaths

Anyway, what we want to animate here linearly isn't a conic-gradient() angle, it's the progress around the perimeter.

This is k, going from 0 to 2. When k is 0, we're at the top right corner. When it's 1, we're at the bottom left corner, having gone across half the perimeter.

What about the progress value at the bottom right? We'll be calling that f, but how much is it?

#CSS #cssGradient #code #coding #web #dev #webDev #webDevelopment #frontend #Maths #cssMaths

Anyway, what we want to animate here linearly isn't a conic-gradient() angle, it's the progress around the perimeter.

This is k, going from 0 to 2. When k is 0, we're at the top right corner. When it's 1, we're at the bottom left corner, having gone across half the perimeter.

What about the progress value at the bottom right? We'll be calling that f, but how much is it?

#CSS #cssGradient #code #coding #web #dev #webDev #webDevelopment #frontend #Maths #cssMaths

On gradient borders & common issues with them https://www.reddit.com/r/css/comments/1tfmohm/comment/ombei2n/

If you've ever wanted to create constant length/ speed border segments on non-square boxes, the how behind the mathy, less code + working with border-radius solution & the stacked children solution (no border-radius).

#CSS #cssGradient #code #coding #web #dev #webDev #webDevelopment #frontend #Maths #cssMaths

On gradient borders & common issues with them https://www.reddit.com/r/css/comments/1tfmohm/comment/ombei2n/

If you've ever wanted to create constant length/ speed border segments on non-square boxes, the how behind the mathy, less code + working with border-radius solution & the stacked children solution (no border-radius).

#CSS #cssGradient #code #coding #web #dev #webDev #webDevelopment #frontend #Maths #cssMaths

Because someone hearted this old @codepen demo done with 2 radio buttons + their labels in a group and it made me notice the title still said "smooth transition Chromium only" - it's been working cross-browser since the summer of 2024! 🥳🎉🎇

https://codepen.io/thebabydino/pen/BadeGMp

#CSS #cssGradient #cssMask #coding #web #dev #webDev #webDevelopment #code #frontend

Because someone hearted this old @codepen demo done with 2 radio buttons + their labels in a group and it made me notice the title still said "smooth transition Chromium only" - it's been working cross-browser since the summer of 2024! 🥳🎉🎇

https://codepen.io/thebabydino/pen/BadeGMp

#CSS #cssGradient #cssMask #coding #web #dev #webDev #webDevelopment #code #frontend

Missed this, made on the 1st of Jan on @codepen:

✨ Sliding border glow on hover for beveled cards, heavily commented https://codepen.io/thebabydino/pen/EayVXKj

Trivial if we have `corner-shape` support & even simpler with `border-area`. But here it's cross-browser.

Detailed explanation of the Maths behind on Ko-fi/ Patreon. This way, you get to both become smarter and support my work so I can continue coding.

#CSS #Maths #cssMaths #cssGradient #cssMask #code #coding #frontend #web #dev #webDev #webDevelopment

Missed this, made on the 1st of Jan on @codepen:

✨ Sliding border glow on hover for beveled cards, heavily commented https://codepen.io/thebabydino/pen/EayVXKj

Trivial if we have `corner-shape` support & even simpler with `border-area`. But here it's cross-browser.

Detailed explanation of the Maths behind on Ko-fi/ Patreon. This way, you get to both become smarter and support my work so I can continue coding.

#CSS #Maths #cssMaths #cssGradient #cssMask #code #coding #frontend #web #dev #webDev #webDevelopment

My most hearted @codepen demos of '26:

✨ Pure #CSS #3D animated carousel https://codepen.io/thebabydino/pen/dPXVyqN

✨ Scatter & #pixelate CSS gradient https://codepen.io/thebabydino/pen/zxBrmdL

✨ Cards with concave rounding on irregular grid https://codepen.io/thebabydino/pen/WbxpKPQ

First two need very little code and are heavily commented.

#SVG #filter #svgFilter #code #coding #cssTransform #cssTransforms #css3D #cssGradient #cssGrid #layout #cssLayout #cssSubgrid #frontend #web #dev #webDev #webDevelopment

My most hearted @codepen demos of '26:

✨ Pure #CSS #3D animated carousel https://codepen.io/thebabydino/pen/dPXVyqN

✨ Scatter & #pixelate CSS gradient https://codepen.io/thebabydino/pen/zxBrmdL

✨ Cards with concave rounding on irregular grid https://codepen.io/thebabydino/pen/WbxpKPQ

First two need very little code and are heavily commented.

#SVG #filter #svgFilter #code #coding #cssTransform #cssTransforms #css3D #cssGradient #cssGrid #layout #cssLayout #cssSubgrid #frontend #web #dev #webDev #webDevelopment

Torn on @codepen: https://codepen.io/thebabydino/pen/XWQQKJd

Absolutely no text duplication whatsoever, not in the markup, not in the `content` of any pseudo. No images save for the "newspaper" background (which doesn't include the torn edges, screen #2) and for #CSS gradients.

Just some #SVG #filter magic! 🪄✨

#svgFilter #cssGradient #textEffects #code #textEffect #coding #frontend #web #dev #webDevelopment #webDev

Torn on @codepen: https://codepen.io/thebabydino/pen/XWQQKJd

Absolutely no text duplication whatsoever, not in the markup, not in the `content` of any pseudo. No images save for the "newspaper" background (which doesn't include the torn edges, screen #2) and for #CSS gradients.

Just some #SVG #filter magic! 🪄✨

#svgFilter #cssGradient #textEffects #code #textEffect #coding #frontend #web #dev #webDevelopment #webDev

Multilayer candy effect with no text duplication. In fact, this is contenteditable, no JS required 🐱

Check out the live demo on @codepen https://codepen.io/thebabydino/pen/XWOvWqM

Just a bit of #SVG #filter magic! 🪄✨

#svgFilter #cssGradient #code #coding #web #dev #webDev #webDevelopment #CSS #frontend #textEffect #textEffects

Multilayer candy effect with no text duplication. In fact, this is contenteditable, no JS required 🐱

Check out the live demo on @codepen https://codepen.io/thebabydino/pen/XWOvWqM

Just a bit of #SVG #filter magic! 🪄✨

#svgFilter #cssGradient #code #coding #web #dev #webDev #webDevelopment #CSS #frontend #textEffect #textEffects

Different `backdrop-filter` effect for navbar vs. its buttons - how would you get this result?

Think about it for a little bit before checking my solution, which you can find on @codepen https://codepen.io/thebabydino/pen/NPrjRpr

PS: I really wanted to make this #CSS only, even if SVG filters can do better.

#filter #cssFilter #cssGradient #cssMask #web #dev #webDev #webDevelopment #code #coding #frontend

Different `backdrop-filter` effect for navbar vs. its buttons - how would you get this result?

Think about it for a little bit before checking my solution, which you can find on @codepen https://codepen.io/thebabydino/pen/NPrjRpr

PS: I really wanted to make this #CSS only, even if SVG filters can do better.

#filter #cssFilter #cssGradient #cssMask #web #dev #webDev #webDevelopment #code #coding #frontend

How would you create such a sliding glow effect on `:hover`? Trivial with `corner-shape`, but what about making it work cross-browser now?

Think about it, then check my solution on @codepen https://codepen.io/thebabydino/pen/EayVXKj

Detailed explanation of the Maths behind (with drawings) on Ko-fi/ Patreon. This way you get to both become smarter and support my work so I can continue coding.

#CSS #cssGradient #cssMask #coding #cornerShape #code #frontend #Maths #web #dev #webDev #webDevelopment #trigonometry

How would you create such a sliding glow effect on `:hover`? Trivial with `corner-shape`, but what about making it work cross-browser now?

Think about it, then check my solution on @codepen https://codepen.io/thebabydino/pen/EayVXKj

Detailed explanation of the Maths behind (with drawings) on Ko-fi/ Patreon. This way you get to both become smarter and support my work so I can continue coding.

#CSS #cssGradient #cssMask #coding #cornerShape #code #frontend #Maths #web #dev #webDev #webDevelopment #trigonometry

A little thing: candy 🍬 ghost 👻 buttons, 3 techniques in one @codepen demo
https://codepen.io/thebabydino/pen/ExvNBRY

Detailed explanation of the how behind in this @csstricks post https://css-tricks.com/css-ing-candy-ghost-buttons/

Bonus: a hover animated, Chrome-only version https://codepen.io/thebabydino/pen/VwzpMxV

#CSS #cssGradient #cssMask #coding #web #dev #webDev #webDevelopment #code #frontend #clipPath #cssClipPath

A little thing: candy 🍬 ghost 👻 buttons, 3 techniques in one @codepen demo
https://codepen.io/thebabydino/pen/ExvNBRY

Detailed explanation of the how behind in this @csstricks post https://css-tricks.com/css-ing-candy-ghost-buttons/

Bonus: a hover animated, Chrome-only version https://codepen.io/thebabydino/pen/VwzpMxV

#CSS #cssGradient #cssMask #coding #web #dev #webDev #webDevelopment #code #frontend #clipPath #cssClipPath

RE: https://mastodon.social/@anatudor/115650006455384500

Because someone just hearted this @codepen demo: https://codepen.io/thebabydino/pen/QwNwWOJ

It was made for a recent article I wrote - check it out, I promise you'll learn something you didn't know before! 👇

#CSS #filter #SVG #cssFilter #svgFilter #cssMask #cssGradient #coding #frontend #web #dev #webDev #webDevelopment #code

RE: https://mastodon.social/@anatudor/115650006455384500

Because someone just hearted this @codepen demo: https://codepen.io/thebabydino/pen/QwNwWOJ

It was made for a recent article I wrote - check it out, I promise you'll learn something you didn't know before! 👇

#CSS #filter #SVG #cssFilter #svgFilter #cssMask #cssGradient #coding #frontend #web #dev #webDev #webDevelopment #code

Some glassy pure #CSS buttons with a single button element - check them out on @codepen https://codepen.io/thebabydino/pen/JBrNEx

#code #coding #cssGradient #frontend #web #dev #webDev #webDevelopment

Some glassy pure #CSS buttons with a single button element - check them out on @codepen https://codepen.io/thebabydino/pen/JBrNEx

#code #coding #cssGradient #frontend #web #dev #webDev #webDevelopment

Beside the halftone part, it also uses the new and improved frame technique detailed in a previous post

https://mastodon.social/@anatudor/115842104085981942

#CSS #SVG #filter #code #cssFilter #blendMode #svgFilter #coding #frontend #web #dev #webDev #webDevelopment #cssGradient #halftone

Beside the halftone part, it also uses the new and improved frame technique detailed in a previous post

https://mastodon.social/@anatudor/115842104085981942

#CSS #SVG #filter #code #cssFilter #blendMode #svgFilter #coding #frontend #web #dev #webDev #webDevelopment #cssGradient #halftone

If you're a Cheetah+ supporter on Ko-fi or Patreon, then first of all thank you 🙏 and second, I've just published something detailing how to easily get halftone-masked images with blend modes and filters.

❇️ https://ko-fi.com/post/Halftone-masking-with-the-frame-technique-W7W81S7LIW

❇️ https://www.patreon.com/posts/halftone-masking-148100795

#CSS #filter #SVG #blendMode #cssFilter #svgFilter #halftone #coding #frontend #web #dev #webDev #webDevelopment #code #cssGradient

If you're a Cheetah+ supporter on Ko-fi or Patreon, then first of all thank you 🙏 and second, I've just published something detailing how to easily get halftone-masked images with blend modes and filters.

❇️ https://ko-fi.com/post/Halftone-masking-with-the-frame-technique-W7W81S7LIW

❇️ https://www.patreon.com/posts/halftone-masking-148100795

#CSS #filter #SVG #blendMode #cssFilter #svgFilter #halftone #coding #frontend #web #dev #webDev #webDevelopment #code #cssGradient

Variable aspect ratio cards with conic gradients meeting along the diagonal.

First coded this when we didn't have inverse trigonometric functions in #CSS - can you figure out how on your own?

@csstricks post https://css-tricks.com/variable-aspect-ratio-card-with-conic-gradients-meeting-along-the-diagonal/

@codepen demo https://codepen.io/thebabydino/pen/XWpyowX

#code #CSSMaths #trigonometry #Maths #cssGradient #conicGradient #coding #web #dev #webDev #webDevelopment #frontend

Variable aspect ratio cards with conic gradients meeting along the diagonal.

First coded this when we didn't have inverse trigonometric functions in #CSS - can you figure out how on your own?

@csstricks post https://css-tricks.com/variable-aspect-ratio-card-with-conic-gradients-meeting-along-the-diagonal/

@codepen demo https://codepen.io/thebabydino/pen/XWpyowX

#code #CSSMaths #trigonometry #Maths #cssGradient #conicGradient #coding #web #dev #webDev #webDevelopment #frontend

Cool concave rounding header component on @codepen: https://codepen.io/thebabydino/pen/azOgOKE

#CSS #clipPath #cssClipPath #cssMask #cssGradient #code #coding #frontend #web #dev #webDevelopment #webDev

Cool concave rounding header component on @codepen: https://codepen.io/thebabydino/pen/azOgOKE

#CSS #clipPath #cssClipPath #cssMask #cssGradient #code #coding #frontend #web #dev #webDevelopment #webDev

Noticed this got featured on @codepen: an animated XOR background - enjoy!

https://codepen.io/thebabydino/pen/JoKYVeB

Made this to answer a question from reddit https://www.reddit.com/r/css/comments/1q242on/comment/nxag5vj/?context=3

#CSS #gradient #blending #cssGradient #blendMode #xor #difference #coding #cssPattern #cssAnimation #frontend #web #dev #webDev #webDevelopment #code

Noticed this got featured on @codepen: an animated XOR background - enjoy!

https://codepen.io/thebabydino/pen/JoKYVeB

Made this to answer a question from reddit https://www.reddit.com/r/css/comments/1q242on/comment/nxag5vj/?context=3

#CSS #gradient #blending #cssGradient #blendMode #xor #difference #coding #cssPattern #cssAnimation #frontend #web #dev #webDev #webDevelopment #code

Another text effect on @codepen: https://codepen.io/thebabydino/pen/ZEZXaZZ

No text duplication whatsoever, no part of the effect baked into the font, no images save for the CSS gradient backdrop, no JS.

All done with #SVG #filter magic 🪄✨ - can you figure out how before checking the code?

#svgFilter #css #code #coding #frontend #textEffect #textEffects #cssGradient #web #dev #webDev #webDevelopment

Another text effect on @codepen: https://codepen.io/thebabydino/pen/ZEZXaZZ

No text duplication whatsoever, no part of the effect baked into the font, no images save for the CSS gradient backdrop, no JS.

All done with #SVG #filter magic 🪄✨ - can you figure out how before checking the code?

#svgFilter #css #code #coding #frontend #textEffect #textEffects #cssGradient #web #dev #webDev #webDevelopment

Outer + inner border for hue ring - 3 methods with a single div, no pseudos, all described in this public Ko-fi post: https://ko-fi.com/post/Outer--inner-border-for-hue-ring--3-methods-A0A51M5XBA

Live demo on @codepen https://codepen.io/thebabydino/pen/RNraELd

Best part? In practice, you'll need to use more than one because none works cross-browser.

#CSS #mask #cssGradient #coding #conicGradient #code #frontend #web #dev #webDev #webDevelopment

Outer + inner border for hue ring - 3 methods with a single div, no pseudos, all described in this public Ko-fi post: https://ko-fi.com/post/Outer--inner-border-for-hue-ring--3-methods-A0A51M5XBA

Live demo on @codepen https://codepen.io/thebabydino/pen/RNraELd

Best part? In practice, you'll need to use more than one because none works cross-browser.

#CSS #mask #cssGradient #coding #conicGradient #code #frontend #web #dev #webDev #webDevelopment

A #contenteditable #3D text effect on @codepen https://codepen.io/thebabydino/pen/PogJybr

No text duplication, no images save for CSS gradients, no part of the effect baked into the font, no JS. It's all clever #CSS and #SVG #filter magic! 🪄✨

PS re: "trashed panda" 🦝🍾🥂🤪
https://www.bbc.com/news/articles/c5y2271q20lo

#svgFilter #cssGradient #code #coding #cssPattern #extrude #extrusion #frontend #web #dev #webDev #webDevelopment #textEffect #textEffects

A #contenteditable #3D text effect on @codepen https://codepen.io/thebabydino/pen/PogJybr

No text duplication, no images save for CSS gradients, no part of the effect baked into the font, no JS. It's all clever #CSS and #SVG #filter magic! 🪄✨

PS re: "trashed panda" 🦝🍾🥂🤪
https://www.bbc.com/news/articles/c5y2271q20lo

#svgFilter #cssGradient #code #coding #cssPattern #extrude #extrusion #frontend #web #dev #webDev #webDevelopment #textEffect #textEffects

Split text with blended half shadow on @codepen https://codepen.io/thebabydino/pen/LYvdBQm?editors=1100

No text duplication whatsoever, no images other than #CSS gradients, no funky fonts* - all done with #SVG #filter magic! 🪄✨

*font used here is https://fonts.google.com/specimen/Rubik+Mono+One - you can see the effect isn't baked into it

#svgFilter #cssGradient #code #coding #web #dev #webDev #webDevelopment #textEffect #textEffects #frontend

Split text with blended half shadow on @codepen https://codepen.io/thebabydino/pen/LYvdBQm?editors=1100

No text duplication whatsoever, no images other than #CSS gradients, no funky fonts* - all done with #SVG #filter magic! 🪄✨

*font used here is https://fonts.google.com/specimen/Rubik+Mono+One - you can see the effect isn't baked into it

#svgFilter #cssGradient #code #coding #web #dev #webDev #webDevelopment #textEffect #textEffects #frontend

Retro dotted shadow text on @codepen https://codepen.io/thebabydino/pen/rNbKOpL

Contenteditable, no JS, no text duplication whatsoever, no images save for code-generated ones. More #SVG #filter magic! 🪄✨

#svgFilter #CSS #radialGradient #retro #cssGradient #textEffects #textEffect #code #coding #frontend #web #dev #webDev #webDevelopment

Retro dotted shadow text on @codepen https://codepen.io/thebabydino/pen/rNbKOpL

Contenteditable, no JS, no text duplication whatsoever, no images save for code-generated ones. More #SVG #filter magic! 🪄✨

#svgFilter #CSS #radialGradient #retro #cssGradient #textEffects #textEffect #code #coding #frontend #web #dev #webDev #webDevelopment

Retro 3D 🍫🦋 effect on @codepen: https://codepen.io/thebabydino/pen/bGybXVj

No text duplication whatsoever, no long shadow list, no funky fonts, no JS, no images other than CSS gradients. Extrusion is all #SVG #filter magic 🪄✨ - as illustrated by the recording below including the DevTools panel.

#svgFilter #textEffects #textEffect #extrude #extrusion #code #coding #frontend #CSS #web #dev #webDev #webDevelopment #cssGradient

Retro 3D 🍫🦋 effect on @codepen: https://codepen.io/thebabydino/pen/bGybXVj

No text duplication whatsoever, no long shadow list, no funky fonts, no JS, no images other than CSS gradients. Extrusion is all #SVG #filter magic 🪄✨ - as illustrated by the recording below including the DevTools panel.

#svgFilter #textEffects #textEffect #extrude #extrusion #code #coding #frontend #CSS #web #dev #webDev #webDevelopment #cssGradient

Options for fading an element's background image:

a - if the backdrop behind the element is solid

b - if the backdrop behind the element is another image

Another 2 in 1 #CSS demo on @codepen https://codepen.io/thebabydino/pen/NPxxQxq

#cssGradient #mask #code #frontend #web #dev #webDevelopment #webDev #coding

Options for fading an element's background image:

a - if the backdrop behind the element is solid

b - if the backdrop behind the element is another image

Another 2 in 1 #CSS demo on @codepen https://codepen.io/thebabydino/pen/NPxxQxq

#cssGradient #mask #code #frontend #web #dev #webDevelopment #webDev #coding

Avatar border effect. Single `img` element (so no pseudos), minimal #CSS. Real transparency between actual image and border.

Live on @codepen https://codepen.io/thebabydino/pen/RwKyzKQ

#code #cssGradient #cssMask #coding #web #dev #webDev #webDevelopment #frontend

Avatar border effect. Single `img` element (so no pseudos), minimal #CSS. Real transparency between actual image and border.

Live on @codepen https://codepen.io/thebabydino/pen/RwKyzKQ

#code #cssGradient #cssMask #coding #web #dev #webDev #webDevelopment #frontend

Remake of an old, old @codepen animation with 2025 #CSS https://codepen.io/thebabydino/pen/jOZPZL

Now using `conic-gradient()` + `mask` instead of an SVG segments ring image. CSS `grid` for layout. Container query units so ring sizes adapt to number of rings (passed to CSS via a var) & available space. And more, check it out! 🐱

Original code preserved in Pen description for web history.

#conicGradient #cssGradient #code #coding #frontend #cssGrid #cssLayout #web #dev #webDev #webDevelopment #containerQueries

Remake of an old, old @codepen animation with 2025 #CSS https://codepen.io/thebabydino/pen/jOZPZL

Now using `conic-gradient()` + `mask` instead of an SVG segments ring image. CSS `grid` for layout. Container query units so ring sizes adapt to number of rings (passed to CSS via a var) & available space. And more, check it out! 🐱

Original code preserved in Pen description for web history.

#conicGradient #cssGradient #code #coding #frontend #cssGrid #cssLayout #web #dev #webDev #webDevelopment #containerQueries