#tinyCSStip
LightNews LightNews
anatudor.bsky.social
Nowadays, we can do better:

```
box-shadow: 0 1px 2px
rgb(from currentcolor r g b/ .65)
```

Cross-browser since September 2024.

#tinyCSStip #CSS
anatudor.bsky.social Ana Tudor @anatudor.bsky.social · Jul 10
#tinyCSStip

Want the shadow of an element or some other visual to be a semitransparent version of the `currentColor`?

Use `color-mix()`!

Cross-browser, btw. 😼
box-shadow: 0 1px 2px color-mix(in srgb, transparent 35%, currentColor)
November 22, 2025 at 3:24 PM
anatudor.bsky.social
#tinyCSStip Want your page background to contain an integer number of dots?

Use `background-repeat: space`! This inserts a bit of space in between background repetitions so we have an integer number of them. Well-supported for ages. 🥳

Live on @codepen.io codepen.io/thebabydino/...

#CSS #pattern
November 13, 2024 at 7:08 AM
anatudor.bsky.social
#tinyCSStip

`:is()` is such a great new-ish #CSS feature that helps eliminate repetition in selectors ✨
No more need for repetition is selectors such as `a:hover, button:hover, input:hover, a:focus, button:focus, input:focus` - we can now simplify this with `:is()` and write just `:is(a, button, input):is(:hover, :focus)` instead.
October 23, 2024 at 9:02 AM
anatudor.bsky.social
#tinyCSStip

I like shorthands, I find them immensely useful. But it doesn't always make sense to drop it all in the shorthand and having repetitions. Yeah, you can store that `.2s` in a #CSS variable. But is it really worth it if you're not even using it elsewhere in addition to not being dynamic?
.nay { /* ❌ DON'T ❌ */ transition: color .2s, padding .2s } .yay { /* ✅ DO ✅ */ transition: .2s; transition-property: color, padding }
April 30, 2026 at 9:17 AM
anatudor.bsky.social
#tinyCSStip

Pretty sure I've posted about this before, but a quick search at this hour didn't find it, plus saw someone ask about it yet again¹, so... fixed aspect-ratio box within variable size container!

Live on @codepen.io codepen.io/thebabydino/...

¹here www.reddit.com/r/css/commen...

#CSS
Code from linked CodePen demo.
December 19, 2024 at 6:30 AM
anatudor.bsky.social
#tinyCSStip We can have boolean logic in container queries!

And this works cross-browser!

Live test on @codepen.io: codepen.io/thebabydino/...

More info on @developer.mozilla.org: developer.mozilla.org/en-US/docs/W...

#CSS
.container { container-type: inline-size } .item { background: #335c67; @container ((width > 220px) and (width < 388px)) or (width > 580px) { background: #e09f3e /* this WORKS cross-browser!!! */ } /* equivalent to: * @container (width > 220px) and (width < 388px) { background: #e09f3e } @container (width > 580px) { background: #e09f3e }/**/ }
June 1, 2025 at 6:20 AM
anatudor.bsky.social
#tinyCSStip

Sometimes, if you notice a teeny tiny misalignment and you cannot understand why because *nothing* in your CSS looks like it could have caused it... try using `round()` to round to an integer number of pixels.

It just solved my own tiny misalignment problem that was driving me batty. 🦇
April 28, 2026 at 5:15 PM
anatudor.bsky.social
#tinyCSStip
Want the shadow of an element or some other visual to be a semitransparent version of the `currentColor`, which was given as a hex or keyword value?

No need to convert to rgb() or hsl() anymore!

#CSS
The two options for getting a semitransparent version of currentColor: box-shadow: 0 1px 2px rgba(from currentColor r g b / .35); box-shadow: 0 1px 2px color-mix(in srgb, currentColor 35%, #0000);
November 20, 2024 at 8:24 AM
anatudor.bsky.social
Also, those letters in the squares? #CSS counters!

```
.item { counter-increment: c }

.item::after { content: counter(c, upper-alpha) }
```

#tinyCSStip
February 20, 2025 at 2:38 PM
anatudor.bsky.social
#tinyCSStip

Range input browser inconsistencies may mean needing different styles for different browsers. Possible for track & thumb via different pseudos, but what about the actual range input?

Well, `@​supports selector()` to the rescue!

Live test on @codepen.io codepen.io/thebabydino/...

#CSS
[type=range] { /* styles for WebKit browsers */ } @supports selector(::-moz-range-track) { [type=range] { /* styles for Firefox */ } }
November 20, 2024 at 8:42 AM
anatudor.bsky.social
#tinyCSStip

How varying clip-path: inset() from the right element edge can help with a left to right reveal effect

✨ when this inset is 100%, all gets cut off
✨ when this inset is 0%, nothing gets cut off

Interactive illustration codepen.io/thebabydino/... + 🆒 pure #CSS on scroll use case 👇
November 20, 2024 at 6:55 AM
anatudor.bsky.social
#tinyCSStip One thing that has always annoyed me about `:empty` is that it doesn't work for elements that have text content, but no element children.

`:has()` fixes this problem.

`:not(:has(*))` selects elements that don't have element children, even if they have text content.
:empty { /* only selects elements without element children * and without any text content whatsoever, * including whitespace */ } :not(:has(*)) { /* selects elements without element children, * even if they have any kind of text content */ }
March 12, 2024 at 9:18 AM
anatudor.bsky.social
#tinyCSStip Create a fancy double border with dashes in between without any pseudos and with minimal #CSS!

The relevant code is just 3 simple CSS declarations!

Live demo on @codepen.io: codepen.io/thebabydino/...
The code and the live result. A dashed border framed by inner and outer box-shadows, all on top of a background is all that's needed for the effect.
January 13, 2025 at 5:25 PM
anatudor.bsky.social
#tinyCSStip As I just saw this in a '24 tutorial to make an absolutely positioned pseudo extend `8px` outside its parent in all directions.

❌ DON'T 🙀
width: 100%; height: 100%;
left: 50%; top: 50%;
translate: -50% -50%;
padding: 8px

✅ DO 😼 (1 declaration, not 6)
inset: -8px

#CSS
/* ❌ DON'T (this is overly complicated for 2024) */ ::after { width: 100%; height: 100%; top: 50%; left: 50%; translate: -50% -50%; padding: 8px } /* ✅ DO (exact same result, 1 declaration instead of 6) */ ::after { inset: -8px }
August 24, 2024 at 9:35 PM
anatudor.bsky.social
#tinyCSStip Want to avoid ugly checkerboard edges when the pattern size --s 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
Ugly (1px misalignment issues) checkerboard edges. Perfect checkerbox edges when every square is an integer number of pixels.
January 9, 2025 at 10:05 AM
anatudor.bsky.social
#tinyCSStip if you want to make an absolutely positioned pseudo cover its parent's entire `padding-box`, use `inset: 0`!

(love grid for stacking/ full coverage too, but there are differences between how the two solutions work and there are cases when absolute positioning is still preferable)

#CSS
Code illustrating the old solutions (setting all four inset longhands or two inset longhands plus dimensions) vs. the much simpler (1 declaration instead of 4) inset shorthand (`inset: 0` is all that's needed). ``` /* want to make pseudo cover parent's entire padding-box */ .parent { position: relative; &::after { content: ''; position: absolute; /* ❌ DON'T do this 😵 */ top: 0; left: 0; height: 100%; width: 100%; /* ❌ DON'T do this either 😵 */ top: 0; right: 0; bottom: 0; left: 0; /* ✅ instead, DO! 😻 */ inset: 0 /* 👍 simpler & has been well-supported for YEARS 🥳 */ } } ```
January 10, 2025 at 8:46 AM
anatudor.bsky.social
#tinyCSStip
Revert animated parent transform (like a scale or skew) on child without an extra animation using registered custom properties.

codepen.io/thebabydino/...

#CSS
@property --f { syntax: '<number>'; initial-value: 1; inherits: true } .scale { scale: var(--f); animation: scale 2s ease-in-out infinite alternate; /* no need for another animation on ::before to revert scale */ &::before { scale: calc(1/var(--f)) } } @keyframes scale { to { --f: .5 } }
March 23, 2025 at 6:55 PM
anatudor.bsky.social
#tinyCSStip Don't use many decimals in keyframe percentages to abruptly change a value. That's what the `steps()` timing function is for!

#CSS
Code illustrating the problem. /* DON'T ❌ */ @keyframes b { 0% { color: tan } 49.99999% { color: tan } 50.00001% { color: red } 100% { color: red } } p { animation: b 2s infinite } /* DO ✅ */ @keyframes b { 50% { color: red } } p { color: tan; animation: b 2s steps(1) infinite }
November 18, 2024 at 9:23 PM
anatudor.bsky.social
Because I often see this and it's a major #CSS pet peeve of mine, makes me want to scream "do you even understand what `cover` does?" at the screen every time...

#tinyCSStip
/* ❌ DON'T ❌ */ .my-elem { background-image: url(my-image.jpg); background-size: cover; background-position: center center; /* this is pointless, nothing repeats when using cover */ background-repeat: no-repeat; } /* ✅ DO ✅ */ .my-elem { /* if only one background-position is specified, * the other defaults to 50% (= center) */ background: url(my-image.jpg) 50%/ cover }
October 17, 2025 at 7:34 PM
anatudor.bsky.social
#tinyCSStip Simplifying animations with variables and mathematical functions.

Same result, just not writing almost the same `text-shadow` a bunch of times in a bunch of keyframes.

Live test on @codepen.io: codepen.io/thebabydino/...

#CSS #Maths
Old CSS ``` .my-elem { animation: glow 5s ease-in-out infinite } /* repeating most of the shadow so many times */ @keyframes glow { 0% { text-shadow: 0 0 5em red /* hsl( 0 100% 50%) */ } 16.7% { text-shadow: 0 0 1em yellow /* hsl( 60 100% 50%) */ } 33.3% { text-shadow: 0 0 5em lime /* hsl(120 100% 50%) */ } 50% { text-shadow: 0 0 1em cyan /* hsl(180 100% 50%) */ } 66.7% { text-shadow: 0 0 5em blue /* hsl(240 100% 50%) */ } 83.3% { text-shadow: 0 0 1em magenta/* hsl(300 100% 50%) */ } 100% { text-shadow: 0 0 5em red /* hsl(360 100% 50%) */ } } ``` New CSS ``` @property --hue { syntax: '<angle>'; initial-value: 0deg; inherits: false } .my-elem { /* no repetition */ text-shadow: 0 1px calc(3em + 2em*cos(var(--hue))) hsl(var(--hue) 100% 50%); animation: hue 5s linear infinite } @keyframes hue { to { --hue: 1turn } } ```
March 24, 2025 at 8:43 AM
anatudor.bsky.social
#tinyCSStip Double stop position is well-supported and has been well-supported for about half a decade, so there's no reason not to use it!

❌ DON'T 😬
orange 40%, hotpink 0, hotpink 60%, purple 0

✅ DO 😎
orange 40%, hotpink 0 60%, purple 0

Also see:
codepen.io/thebabydino/...

#CSS
Example without double stop position vs. with double stop position.
September 26, 2024 at 2:54 PM
anatudor.bsky.social
Basic #tinyCSStip.💡

So you have a responsive, flexible `width` rectangular box with `aspect-ratio: 2` and want to turn it into a half disc?

Use a `50%` horizontal `border-radius` and a vertical one that's `100%` for the top corners (first two listed) and `0` for the other two!
Code: ``` .myElem { width: 86%; aspect-ratio: 2/ 1; border-radius: 50%/ 100% 100% 0 0; background: tomato } ``` Result: a tomato half disc.
December 30, 2023 at 1:10 PM
anatudor.bsky.social
#tinyCSStip Gradient hints work cross-browser!

Test
codepen.io/thebabydino/...
(without hint, with hint, difference)

What MDN says
developer.mozilla.org/en-US/docs/W...
Screeenshot of the MDN section linked in the tweet.
January 9, 2024 at 10:16 AM
anatudor.bsky.social
Know how border-image & border-radius don't play nice together?

(interactive codepen.io/thebabydino/...)

#tinyCSStip there's a workaround IF corner radius ≤ border-width: use inset() clip-path + a round value!

clip-path: inset(0 round $r)

@codepen.io demo: codepen.io/thebabydino/...

#CSS
Screenshot showing the interactive demo showing that setting a `border-image` on an element with `border-radius` makes the `border-radius` be ignored. Screenshot of the solution when the desired corner rounding is not bigger than the border-width: ``` border: solid $r; border-image: linear-gradient(90deg, purple, orange) 1; clip-path: inset(0 round $r) ```
March 17, 2025 at 8:10 AM
anatudor.bsky.social
#tinyCSStip

❌ DON'T (blurry edge for big background-size, jagged edge for small background-size)
radial-gradient(at 0 100%, #000 69%, #0000 70%)

✅ DO (smooth edge regardless of background-size)
radial-gradient(at 0 100%, #000 calc(70% - 1px), #0000 70%)
/* ❌ DON'T */ /* blurry edge for big background-size (as shown illustrated below code box), * jagged edge for small background-size */ .elem { background: radial-gradient(at 0 100%, #000 69%, #0000 70%) } /* ✅ DO */ /* smooth edge regardless of background-size (as shown illustrated below code box) */ .elem { background: radial-gradient(at 0 100%, #000 calc(70% - 1px), #0000 70%) }
August 15, 2024 at 10:54 AM