RSS FeedTwitterMastodonBlueskyShare IconHeart IconGithub IconArrow IconClock IconGUI Challenges IconHome IconNote IconBlog IconCSS IconJS IconHTML IconShows IconOpen Source Software IconSpeaking IconTools IconShuffle IconNext IconPrevious IconCalendar IconCalendar Edit IconNotebook IconObservable Notebooks IconSlash IconGoogle G Icon
A cartoon skull with a hotpink hat on.
atom@argyleink
notecss

Combo light-dark() with Temani's great border-image techniques.

.card > figcaption {
  color: light-dark(#000, #fff);
  border-image: fill 0 conic-gradient(light-dark(#fff8, #0008) 0 0);
}

Try it on Codepen

light exampledark example

1 mention #

15likes
3reposts
  • Brett Peary
  • BikeBot
  • Paul Shryock

Join the conversation on

Any reason why not just use background instead of border-image?
Ana TudorAna Tudor