#cssgradient — Public Fediverse posts

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

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

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

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

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

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

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.

#CodePenChallenge #CodePen #3D #code #geometry #maths #mathematics #coding #recursion #cssGradient #frontend #web #dev #webDev #webDevelopment #transform #css3D #cssTransform #cssVariables

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.

#CodePenChallenge #CodePen #3D #code #geometry #maths #mathematics #coding #recursion #cssGradient #frontend #web #dev #webDev #webDevelopment #transform #css3D #cssTransform #cssVariables

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.

#CodePenChallenge #CodePen #3D #code #geometry #maths #mathematics #coding #recursion #cssGradient #frontend #web #dev #webDev #webDevelopment #transform #css3D #cssTransform #cssVariables

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.

#CodePenChallenge #CodePen #3D #code #geometry #maths #mathematics #coding #recursion #cssGradient #frontend #web #dev #webDev #webDevelopment #transform #css3D #cssTransform #cssVariables

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

#scrollAnimation #code #coding #frontend #cssGradient #cssMask #conicGradient #cssMaths #maths #scrollEffect #cssGrid #web #dev #webDev #webDevelopment

2️⃣ 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.

#cssFilter #borderImage #glow #code #cssGradient #conicGradient #coding #web #dev #webDevelopment #webDev #frontend

Saw a @codepen demo using... a lot! of elements (screen 1) and quite a bit of #CSS to create a simple loader, so I forked it and made a 1 div version (screen 2) in under 30 CSS declarations (gradients, mask, variables to only change --c0 and --c1 values for 2nd loader): https://codepen.io/thebabydino/pen/PwoLJLR

#cssMask #cssGradient #conicGradient #maths #trigonometry #Sass #loader #web #dev #webDev #webDevelopment #code #coding #frontend #cssAnimation

A little spinner I made years ago on @codepen but never shared publicly https://codepen.io/thebabydino/pen/OJQKbKW

#CSS #loader #spinner #code #coding #web #dev #webDev #webDevelopment #frontend #cssGradient #cssMask #conicGradient #cssSpinner #cssLoader #singleDiv #oneDiv

Know the animated 🌈 border + glow effect that's all the rage? It's normally done by adding an opaque cover on top of two 🌈 layers.

But what if we wanted a (semi)transparent background within the border? It's possible with pure #CSS!

Heavily commented on @codepen https://codepen.io/thebabydino/pen/KwPBvzo

#cssGradient #conicGradient #code #web #dev #webDev #webDevlopment #frontend #coding #cssAnimation #rainbow

Because somebody asked how to fix an animated border glow effect on scroll entry (https://www.reddit.com/r/css/comments/1i1ts9q/comment/m79twbr/), here's my take on @codepen

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

Four options in the demo. Well, two, the last two are just enhancing the second.

#CSS #SVG #filter #svgFilter #code #web #dev #webDev #webDevelopment #coding #frontend #cssGradient #conicGradient #glow

#tinyCSStip Want to avoid ugly checkerboard edges when pattern size depends on viewport?

Round it to be a multiple of 2px so every square edge is an int number of pixels!

--s: round(10vmin, 2px);
background:
repeating-conic-gradient(red 0% 25%, tan 0% 50%)
0 0/ var(--s) var(--s)

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

Made this loader https://codepen.io/thebabydino/pen/BayGjrq half a decade ago. Then it only worked in Chromium browsers with the Experimental Web Platform features flag enabled.

As of 2024, it works cross-browser, no flags needed. Since someone hearting it reminded me of its existence, updated support info.

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

This little thing made this week's @codepen Spark!

https://codepen.io/spark/415

#CSS #code #coding #frontend #web #dev #cssGradient #webDevelopment #webDev #glow #cssAnimation #rainbow

Simplest gradient border buttons (with border-radius) https://codepen.io/thebabydino/pen/vYoJqBK

Multiple cases, each just a few lines of code:
✨ solid background
✨ (semi)transparent background
✨ (semi)transparent background for input[type=button] (so no pseudos allowed)

#CSS #cssGradient #cssMask #masking #code #coding #frontend #web #dev #webDev #webDevlopment

Also on the topic of circle sectors/ pie slices 🥧 - I've updated an old SO answer of mine https://stackoverflow.com/a/14185845/1397351

This goes through the simplest code possible in 2024 for a few cases (equal slices or not, interactive/ with content or not).

#CSS #cssGradient #Sass #conicGradient #clipPath #cssMaths #Maths #geometry #trigonometry #code #coding #frontend #web #dev #webDev #webDevelopment

If you're interested in checking out a lot of other modern and compact #CSS patterns, you can find them under the tag in my @codepen profile

https://codepen.io/thebabydino/pens/tags/?selected_tag=css-patterns

#pattern #cssPattern #grafient #cssGradient #conicGradient #code #coding #frontend #web #webDev #webDevelopment #dev

So this very subtle pure #CSS pattern got picked on @codepen https://codepen.io/thebabydino/pen/vYqbwLN

¯\_(ツ)_/¯

(only made it to provide an answer to a question someone asked... and I almost answered with "are you sure you uploaded the right image?" because the lines were so subtle I missed them at first)

#pattern #cssPattern #gradient #cssGradient #conicGradient #code #coding #frontend #web #webDev #dev #webDevelopment

I've just seen a bunch of my demos "trending" on @codepen.

✨ stroke shadow wave 🌊
✨ no matrix gooey effect
✨ slice 🗡️
✨ here is real magic 🧞
✨ slice & offset 🔪
✨ dizzy 3D 🥴
✨ blended layers
✨ split text effect
✨ realistic grainy shadows

...just on the first 5 pages! 🤯

#SVG #CSS #filter #svgFilter #3D #transform #cssTransforms #cssGradient #code #coding #web #webDev #webDevelopment #frontend

#tinyCSStip Avoid ugly edges for CSS gradient circles!

❌ DON'T 😭
(abrupt change, no semi-transparent pixels at the edge, jagged look)
radial-gradient(circle, #202 5em, #0000 0)

✅ DO 😻
(semi-transparent edge pixels, smooth look)
radial-gradient(5em, #202 calc(100% - 1px), #0000)

#css #cssGradient #cssTricks #jagged #jaggedEdge #smooth #smoothEdge #code #coding #frontend #web #webDev #dev #webDevelopment

9⃣ 473 ❤️ 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

#spinner #loader #cssGradient #conicGradient #meshGradients #rainbow #pastel #code #coding #frontend #web #webDev #dev #webDevelopment

Retro-striped text with #SVG filters - detailed step by step, #CodePen demos & more
https://www.patreon.com/posts/retro-striped-97563502

(final, link for all, not just patrons)

#css #svgFilter #cssFilter #dropShadow #shadow #retro #stripes #neon #cssGradient #grainy #code #coding #frontend #webDev #webDevlopment