Frontend First cover image

Frontend First

Creating a background gradient from an image

Dec 12, 2024
48:39

Ryan talks to Sam about reproducing iOS's new image background treatment for his Open Graph Preview tool, opengraph.ing. They talk about different approaches for generating gradients from images, including finding the vibrant color of an image, luminosity-weighted averages, k-means clustering, and more.

Timestamps:

  • 0:00 - Intro
  • 3:07 - Apple's new OG image gradient
  • 10:06 - Luminosity-weighted average
  • 14:22 - Finding the vibrant color of an image
  • 21:41 - Contrast ratios on favicons
  • 32:21 - K-means clustering
  • 41:25 - Refactoring UI tip about rotating the hue

Links:

Get the Snipd
podcast app

Unlock the knowledge in podcasts with the podcast player of the future.
App store bannerPlay store banner

AI-powered
podcast player

Listen to all your favourite podcasts with AI-powered features

Discover
highlights

Listen to the best highlights from the podcasts you love and dive into the full episode

Save any
moment

Hear something you like? Tap your headphones to save it with AI-generated key takeaways

Share
& Export

Send highlights to Twitter, WhatsApp or export them to Notion, Readwise & more

AI-powered
podcast player

Listen to all your favourite podcasts with AI-powered features

Discover
highlights

Listen to the best highlights from the podcasts you love and dive into the full episode