Skip to content
Creating a background gradient from an image episode artwork

EPISODE · Dec 12, 2024 · 48 MIN

Creating a background gradient from an image

from Frontend First · host Frontend First

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: Open Graph Preview Refactoring UI

Episode metadata supplied by the publisher feed · Published Dec 12, 2024

Embed this episode

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.

Distinct summary based on available episode metadata or transcript content.

Ready to play

Creating a background gradient from an image

0:00 48:39

No transcript for this episode yet

We transcribe on demand. Request one and we'll notify you when it's ready — usually under 10 minutes.

No similar episodes found.

No similar podcasts found.

Frequently Asked Questions

How long is this episode of Frontend First?

This episode is 48 minutes long.

When was this Frontend First episode published?

This episode was published on December 12, 2024.

Can I download this Frontend First episode?

Yes. Use the download control on the episode player to save the publisher-provided media file.
URL copied to clipboard!