Nume MacAroon Ⓥ @nm

**Ana Tudor** @anatudor@mastodon.social · 1d *

Maybe don't rely on AI to answer your CSS questions. Actually... without the maybe. Don't rely on AI to answer your CSS questions.

Prompt: gradient triangle CSS

Answer:
Ah, a gradient triangle with CSS! That's a fun little visual trick. There are a few ways to achieve this, playing with borders and linear gradients. Here's a common and effective method using linear-gradient on a pseudo-element:

CSS
```
.gradient-triangle {
width: 0;
height: 0;
border-left: 50px solid transparent; /* Adjust size as needed */
border-right: 50px solid transparent; /* Adjust size as needed */
border-bottom: 100px solid red; /* Initial solid color */
position: relative; /* For positioning the pseudo-element */
}

.gradient-triangle::before {
content: "";
position: absolute;
top: 0;
left: -50px; /* Match the left border */
width: 100px; /* Match the combined left and right borders */
height: 100px; /* Match the bottom border */
background: linear-gradient(to bottom, rgba(255, 0, 0, 0), blue); /* Gradient */
-webkit-mask: polygon(0 0, 100% 0, 50% 100%); /* Clip to a triangle */
mask: polygon(0 0, 100% 0, 50% 100%);
}
```

#CSS #AI #aiCode

Continued thread

**Ana Tudor** @anatudor@mastodon.social · Apr 12

Apr 12

Ana Tudor @anatudor@mastodon.social

You can find a very detailed explanation about the how behind in my Taming Blend Modes: `difference` and `exclusion` article on @csstricks https://css-tricks.com/taming-blend-modes-difference-and-exclusion/

Screenshot of an interactive demo, highlighting how the `difference` blend mode works.

#CSS #blending #blendMode

Continued thread

**Ana Tudor** @anatudor@mastodon.social · Apr 12

Apr 12

Ana Tudor @anatudor@mastodon.social

And here are cards with gradual left to right inversion: from no inversion at all on the left, to full inversion on the right. Again, minimal code, single div, no pseudos necessary, 2 #CSS declarations.

Live demos on @codepen

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

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

.card {
background:
url(image.jpg) 50%/ cover,
linear-gradient(90deg, #000, #fff);
/* or the difference blend mode */
background-blend-mode: exclusion
}

Inverted image using the exclusion blend mode. The butterfly goes from its original blue on the left to red on the right, passing through a 50% grey.

Pseudo-inversion of image using the difference blend mode. The butterfly goes from its original blue on the left to red on the right, this time passing through other hues rather than through a 50% grey.

#blending #blendMode #cssGradient

Continued thread

**Ana Tudor** @anatudor@mastodon.social · Apr 11

Apr 11

Ana Tudor @anatudor@mastodon.social

Here's another set of cards with varying patterns, all created with the exact same 4 blended CSS gradients, it's just the stops list `--c` that changes for each card.

So basically, it's again just one `background` + one `background-blend-mode` property.

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

.card {
--s: rgb(0 0 0/ .2) 0, #0000 5px 50px;
background:
/* shadows */
repeating-linear-gradient(45deg, var(--s)),
repeating-linear-gradient(-45deg, var(--s)),
/* main pattern */
repeating-linear-gradient(45deg, var(--c)),
repeating-linear-gradient(-45deg, var(--c));
background-blend-mode:
multiply, multiply, lighten
}

.card:nth-child(1) {
--c: #847971 0 10px, #938981 0 20px,
#9e938a 0 30px, #a89c93 0 40px, #bfb6ab 0 50px
}

.card:nth-child(2) {
--c: #333 0 10px, #555 0 20px,
#c55 0 30px, #ccc 0 40px, #eee 0 50px
}

#CSS #blending #blendMode

Continued thread

**Ana Tudor** @anatudor@mastodon.social · Apr 11

Apr 11

Ana Tudor @anatudor@mastodon.social

And here's a cards demo with a cool, yet very simple trick: these left to right gradients are vibrant at the top, but then progressively get more and more desaturated going down, until fully grey.

Live on @codepen https://codepen.io/thebabydino/pen/xxzjJXL - only 2 CSS declarations necessary!

Screenshot of demo with gradient cards, all showing left to right gradients, vibrant at the top of the card, but getting progressively more and more desaturated as we go towards the bottom.

.card {
/* relevant code for the effect */
background:
linear-gradient(90deg,
var(--stop-list)),
linear-gradient(#0000, grey);
background-blend-mode: luminosity;

/* other styles */
aspect-ratio: 3/ 2;
border-radius: .5em;
box-shadow: 2px 2px 5px 1px #040404
}

#CSS #tinyCSStip #blending

Continued thread

**Ana Tudor** @anatudor@mastodon.social · Apr 11 *

Apr 11 *

Ana Tudor @anatudor@mastodon.social

A much newer @codepen demo: smoothly connected cards https://codepen.io/thebabydino/pen/azbLBJy - continuous backgrounds across all, concave roundings + drop shadows, responsivity.

#CSS #SVG #filter

Continued thread

**Ana Tudor** @anatudor@mastodon.social · Apr 9

Apr 9

Ana Tudor @anatudor@mastodon.social

Here's also a stepped `conic-gradient()` effect, with a grain effect applied https://cdpn.io/pvoBeZP

For more on the grain effect, check out this older post https://mastodon.social/@anatudor/110394395163731287

#CSS #SVG #filter

Continued thread

**Ana Tudor** @anatudor@mastodon.social · Apr 9

Apr 9

Ana Tudor @anatudor@mastodon.social

Same visual result in both cases, it's just that the #CSS version specifies the entire RGBA value + (equidistant) stop positions for each stop, while the #SVG #filter one only specifies the alpha values for each stop. Given those are equidistant too, a `steps()` way of setting them would make sense.

More stepped gradient examples on @codepen
https://codepen.io/thebabydino/pen/jOoLmBv

These all use the same SVG filter.

#svgFilter #cssGradient #coding

Continued thread

**Ana Tudor** @anatudor@mastodon.social · Apr 9

Apr 9

Ana Tudor @anatudor@mastodon.social

If what you want isn't beveled, but scooped corners, then you can do it with a `radial-gradient()` mask. You can even add borders too!

Here's a @codepen demo illustrating this https://codepen.io/thebabydino/pen/VYwObZN

Pure #CSS, no SVG.

Screenshot of a linked demo. Shows an image with scooped corners and a teal border following the scooped corners shape.

#cssGradient #cssMask #coding

**Ana Tudor** @anatudor@mastodon.social · Apr 9 *

Apr 9 *

Ana Tudor @anatudor@mastodon.social

I haven't had the time to do anything for this week's #CodePenChallenge yet, but here are some older card demos:

From 5+ years ago: pure #CSS 1 element bevel cards! No SVG or images save for the cat, real (semi)transparency inside borders and all.

See it on @codepen https://codepen.io/thebabydino/pen/ZEGNNQz

Screenshot of linked demo. Shows 7 beveled cards, some with borders (solid, gradient or patterned ones), some with (semi)transparent backgrounds, some with gradient backgrounds, one with an image background. They are all on top of an image backdrop.

#clipPath #cssClipPath #code

**Ana Tudor** @anatudor@mastodon.social · Apr 7

Apr 7

Ana Tudor @anatudor@mastodon.social

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

Screenshot with DevTools open, showing each loader being created with a div with 4 other nested div elements, 2 span elements, 2 i elements and 2 pseudos inside.

Screenshot with DevTools open, showing each loader being created with only 1 div and its 2 pseudos.

#cssMask #cssGradient #conicGradient

**Ana Tudor** @anatudor@mastodon.social · Apr 1

Apr 1

Ana Tudor @anatudor@mastodon.social

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

GIF

#CSS #loader #spinner

**Ana Tudor** @anatudor@mastodon.social · Mar 11

Mar 11

Ana Tudor @anatudor@mastodon.social

Because someone just hearted a 5 year old @codepen demo https://codepen.io/thebabydino/pen/GRooBJm?editors=0100 I made using a #Sass function + looping to generate a #CSS : we don't need *any* Sass for this anymore!

We can now do it with

background:
linear-gradient(in hsl longer hue 90deg,
hsl(0, 95%, 65%) 0 0)

Comparative look at the old Sass code vs. the new and much simpler plain CSS code, both producing the same result (a nice-looking rainbow) shown before both of them.

Old SCSS solution:

```
@function get-rainbow($n: 12, $sat: 90%, $lum: 65%) {
$unit: 360/$n;
$s-list: ();

@for $i from 0 through $n { $s-list: $s-list, hsl($i*$unit, $sat, $lum) }

@return $s-list
}

html { background: linear-gradient(90deg, get-rainbow()) }
```

New plan CSS solution:

```
html {
background:
linear-gradient(in hsl longer hue 90deg, hsl(0, 95%, 65%) 0 0)
}
```

#SCSS #loop #looping

Continued thread

**Ana Tudor** @anatudor@mastodon.social · Feb 28 *

Feb 28 *

Ana Tudor @anatudor@mastodon.social

Made a gallery of such #SVG gradient + #filter effects blobs on @codepen
https://codepen.io/thebabydino/full/YPzNWoR

Also includes an explanation of the how behind and interaction: the focal point of the `radialGradient` the blobs start from follows the cursor on hover.

Different blobs for light/ dark mode.

Comparative screenshot of a few of the blobs in both light and dark mode.

$Demo screen with the info section. Each distorted blob starts out as a circle, tightly fit inside its parent svg element (which has its viewBox set so its 0,0 point is dead in the middle). This circle then gets a radialGradient fill. Choosing the SVG radial gradient over the CSS one as it also allows setting focal point coordinates (fx,fy) distinct from cx,cy - hover a blob to see how its focal point follows the cursor. <radialGradient id='g' gradientUnits='objectBoundingBox' fx='.35' fy='.65'> <stop stop-color='var(--c0)'/> <stop stop-color='var(--c1)' offset='.5'/> <stop stop-color='rgba(from var(--c1) r g b/ 0)' offset='1'/> </radialGradient> The circle with the gradient is then blurred, distorted & given a grainy/ dithered look. The last two actions make use of the same concept of altering the input using noise generated by feTurbulence as a displacement map. The displacement used for distortion is relative to input size. The noise used for dithering is finer (larger baseFrequency). <filter id='distort' primitiveUnits='objectBoundingBox' x='-50%' y='-50%' width='200%' height='200%'> <feTurbulence type='fractalNoise' baseFrequency='.00713'/> <feDisplacementMap in='SourceGraphic' scale='.3' yChannelSelector='R'/> </radialGradient> <filter id='grain' x='-50%' y='-50%' width='200%' height='200%'> <feTurbulence type='fractalNoise' baseFrequency='7.13'/> <feDisplacementMap in='SourceGraphic' scale='32' yChannelSelector='R'/> </radialGradient>$

#svgGradient #cssGradient #blob

**Ana Tudor** @anatudor@mastodon.social · Feb 28

Feb 28

Ana Tudor @anatudor@mastodon.social

Grainy distorted gradient blob: 1 #SVG `radialGradient` (setting a focal point `fx,fy`) vs. multiple #CSS `radial-gradient()` layers (no option to control focal point).

Using filters for distortion & grain effect.

A bit more detail on this https://www.reddit.com/r/css/comments/1j03iyv/comment/mf89ri9/

Comparative result of the SVG radialGradient vs. the CSS radial-gradient() blob.

#svgGradient #cssGradient #blob

**Ana Tudor** @anatudor@mastodon.social · Jan 18

Jan 18

Ana Tudor @anatudor@mastodon.social

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

GIF

#cssGradient #conicGradient #code

**Ana Tudor** @anatudor@mastodon.social · Jan 15

Jan 15

Ana Tudor @anatudor@mastodon.social

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.

First two base options. They look pretty much the same, no grainy glow and no roundings, so the sharp opaque end of the rotating conic gradient border doesn't look too great.

Variations on the second option. Both have a grainy glow and the second also rounds the end of the animated fading border.

#CSS #SVG #filter

**Ana Tudor** @anatudor@mastodon.social · Jan 7

Jan 7

Ana Tudor @anatudor@mastodon.social

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.