You can find all demos made for & mentioned in the article gathered up in this @codepen collection https://codepen.io/collection/yyNzVe
#cssgradient
0 posts0 participants0 posts today
I wrote a new article for Frontend Masters: Step Gradients with a Given Number of Steps!
Consider this problem: you are given 2 hex codes + a number of steps. How would you code a step gradient? Think about it, then see my solution https://frontendmasters.com/blog/step-gradients-with-a-given-number-of-steps/
Hope you enjoy, a lot of work went into it.
Please tell me if I'm hallucinating or is this the WTAF of the day: do the two rectangles look the same for you in Chromium browsers or does the first have thicker and more faded lines (screen 1)?
They look the same in Firefox and Epiphany for me (screen 2).
https://codepen.io/thebabydino/pen/gbpymQq
Thank you!
Continued thread
480 
Pure #CSS 1 element #rainbow 
spinner 2017 https://codepen.io/thebabydino/pen/YNjrRo - 1st remake of a thing I first coded in 2013.
I've since made 2 more versions with more modern (and better!) CSS:
2023 https://codepen.io/thebabydino/pen/poGyEyg
2019 https://codepen.io/thebabydino/pen/exwyby
Continued thread
In general, we can vary any of the four RGBA channels from 0% to 100% along the gradient line while keeping the other three fixed (custom chosen, but having that same custom value everywhere along the gradient line).
Interactive demo on @codepen https://codepen.io/thebabydino/full/ByNVrKL
Continued thread
So what else could we do? Use an SVG filter!
Set the #CSS gradient as one with two end stops and no steps and apply a super simple #SVG #filter (same idea as here https://mastodon.social/@anatudor/114703583973454917 ) that makes it stepped.
Works for all gradient types - see this @codepen demo https://codepen.io/thebabydino/pen/raVrZQN 
Continued thread
Using CSS variables solves both these problems, but we cannot use #CSS variables inside the #Sass `mix()` function, we have to use the CSS `color-mix()`. This means the compiled output looks way uglier.
You can check it out in this @codepen demo https://codepen.io/thebabydino/pres/bNdjKwJ
Given the end steps (00272b & e0ff4f) + a number n of steps, create a gradient with n equal & equidistant steps.
Generating them in a #Sass loop is always an option, but every gradient with different end steps gets its own long stop list & modifying an end step in DevTools doesn't change ALL steps. 
You can see it in the live demo https://codepen.io/thebabydino/pen/xbxeyOM
Continued thread
A big problem when the #noise is just layered on top of a #gradient is that this alters its palette - to a greater or lesser extent, depending on the noise alpha & on the blend mode used - you can see it in this interactive @codepen demo https://codepen.io/thebabydino/full/qEdbEQZ
(heavily commented, btw)
Decreasing the alpha of the noise overlay is two edged.
Continued thread
You can find all CodePen demos created for or mentioned in the article in this @codepen collection https://codepen.io/collection/rBaKPG
A little something on @codepen: pure #CSS icosphere of spheres https://codepen.io/thebabydino/pen/poYRGmV
Very little code and I should be able to make the algorithm even more efficient. Pure CSS shading too.
Turn black to red CSS linear gradient into step one with a super simple #SVG #filter: interactive demo allowing to drag a slider to change the number of steps n and see how the visual result and relevant part of the filter code change.
@codepen demo https://codepen.io/thebabydino/full/NPWmorj
Feedback?
I made a little thing on @codepen :pure #CSS #scroll controlled swipe transition https://codepen.io/thebabydino/pen/azObZOe
Note how the swipe always clockwise, regardless of scroll direction and how the text fades in after the swipe in.
Inspiration https://x.com/avanderpotte/status/1923382432784412771
(via @codrops motion highlights roundup)
cc @bramus
Continued thread
486 Pure #CSS 1 div card backgrounds https://codepen.io/thebabydino/pen/GRRpzNX
Using mask compositing, which I explained in this @csstricks article https://css-tricks.com/mask-compositing-the-crash-course/
Another where I should go through the code and improve it as it can be simplified nowadays... a lot even!
Continued thread
501 Slice! https://codepen.io/thebabydino/pen/GRaKbZo
Definitely one of my faves I've made on @codepen in 2024.
No JS, no text duplication whatsoever, no images save for #CSS gradients. #SVG filters take care of both the texture and the slice + offset effect.
Also contenteditable.
Oh, and the code is heavily commented.
Continued thread
593 Cycling gradient glow with no text duplication - see it on @codepen https://codepen.io/thebabydino/pen/rNPOpJK
A super simple, but cool #SVG #filter trick.
We create the gradient text.
The filter creates a blurred copy of it and places it underneath.
Continued thread
736 
Pure #CSS 1 div card patterns (no SVG, no images other than CSS gradients) - see it on @codepen https://codepen.io/thebabydino/pen/NWxBzRv
A bunch of variations on the pure CSS #halftone technique detailed in this article https://frontendmasters.com/blog/pure-css-halftone-effect-in-3-declarations/
Continued thread
850 No SVG, no image fluid slider https://codepen.io/thebabydino/pen/qByGqOm
#JS used only for
a) feature support detection
b) updating slider value in --val
Uses only
1 × input[type=range] for actual slider
1 × output for current value display
1 × datalist for ruler
One of my best sliders on @codepen.
I wrote something about #AI... something with a long title!
ChatGPT and the proliferation of obsolete and broken solutions to problems we hadn’t had for over half a decade before its launch https://frontendmasters.com/blog/chatgpt-and-old-and-broken-code/
It takes the #ChatGPT answer to a particular question, dissects it and goes through a bit of web history to explain what ChatGPT gets wrong and why.
Continued thread
1076 Simplest inner glow card animation https://codepen.io/thebabydino/pen/WNVPdJg - a super simple pure #CSS demo I made in a few minutes to answer a reddit question and never expected would even get noticed much. It was my only 2024 demo to make into the most hearted 100 Pens of the year on @codepen.