Matthew Morete

CSS can only morph between shape()s with the same number and type of commands, which usually they don't. So I made a tool to convert them into compatible shapes. shapemorph.matthewmorete.com It tries to pick the smoothest arrangement of points, but adjust the shape index to try other variations!

Was using Glyphhanger to subset a font to just Latin and remove the variable axis. Went from 36KB to 16KB, pleased with that. Just to see, I asked Claude to give it a go. It managed to reduce it down to just 6KB by redrawing the glyphs! Much better than I'd ever achieve by myself, I highly recommend

An updated version that uses @function, which makes the code much more concise and readable. codepen.io/editor/matth... Though still not concise or readable

Chuffed to get a shout out in this vid from @kevinpowell.co! www.youtube.com/watch?v=bLB9... Learn how to use a few less magic numbers with progress()

A 7 segment clock powered by CSS shape() codepen.io/editor/matth...

Now 40% less CSS for the same result! - Minified CSS - No SVG wrapper, I was wrong, it doesn’t need it - No supports, supporting view-transitions but not mask is rare and they just get no transition - Better png encoding + No MIME type or checksum - Frames reversed when smaller

What do you want us to work on in 2027? Here's a web app where you can rank the Interop proposals you care about, giving us data we can use to prioritise feature development. interop-rank.fxdx.dev

Fallbacks for CSS “progress()”, by @matthewmorete.com (@frontendmasters.com): https://blog.master.dev/fallbacks-for-css-progress/?ref=frontenddogma.com #css #functions

If you wanna use progress() but the browser support isn't good enough yet, then have I got the blog post for you

"Pixel Dissolve Mask Generator" by Matthew Morete codepen.io/editor/matth... + a very cool website! matthewmorete.com

Staff Software Engineer, great with: SQL, Node, Accessibility, Web Assembly, CSS, React, 3D Experience with: Firebase, PHP, Python, C, C#, C++, Java, Native Wii Homebrew Known for: CSS hacking & inventions, tech writing, (offline) game hacking, and many published OS packages

A pixel dissolve generator! codepen.io/editor/matth... I've tried to make this effect 10 different ways at this point and it usually requires a mountain of code. An encoded PNG, wrapped in an encoded SVG with 'image-rendering:pixelated' is a very fun CSS trick and way way more compact.

codepen.io/editor/matth...

All the corner-shape variations made with shape(). Hopefully not something we'll ever need in practise, cause it's way more code (and doesn't include nice features like automatic clamping), but fun to play about with

A pixel font with clip-path on @codepen.io codepen.io/editor/matth...

Great news 🤩 For anyone interested in how to use progress in fluid typography @matthewmorete.com made an excellent post about it here 👇 blog.master.dev/fluid-typogr...

I was tired of having to remember how to calculate measurements for flat-bottom bags. Ive seen calculators for more complicated pouches, but couldnt find a simple calculator just for bottom boxed corners, so I like any good developer with a hobby I built one. boxedbottompattern.netlify.app #sewing

Probably the last shape tool for my collection: Minify Shape. It’s very much inspired by SVGO, trying to do the same kind of cleanup and optimisation but for CSS shapes. minifyshape.matthewmorete.com Tested it with every shape I can get my hands on but would love to hear if you find any issues!

TIL: 'border-radius: 6px 999px 999px 6px' becomes '0px 999px 999px 0px' in most cases. 'When the sum of any two adjacent border radii exceeds the size of the border box, UAs must proportionally reduce the used values of all border radii until none of them overlap.'

Some of my other tools would spit out extremely ugly calcs that I didn't want to clean up, but eventually I just wanted it to be dealt with and since subdomains are free it can now exist as its own thing minifycalc.matthewmorete.com

TIL calc(10px + 0) is invalid, but calc(10px + 0px) isn't. Learning when unitless zeros are acceptable is so confusing 😭

Small update to my Path to Shape() tool: a slightly nicer ui & dark mode, a tad more optimised output, and a control for decimal precision (which helps a lot as shape() can get biggggg). Check it out here: pathtoshape.matthewmorete.com

This week's side project: a little tool to convert CSS shape() paths into polygon() for a fallback/better browser support. Try it here: shapetopolygon.matthewmorete.com

Playing around with making a 'shape to polygon' converter for the purposes of fallbacks. But it's interesting that since shape() is sooo verbose you can often get a very similar result for almost the same bytes with polygon()

Western Hypocrisy Is Western Supremacism: An argument against double standards, separation, and a hierarchy of worth.

@kevinpowell.co If you're looking for another question I'd be very interested in more 2 state vs 3 state dark/light toggle data! Very fascinating how much great minds are differing on this

codepen.io/editor/matth... A responsive auto grid, that ensures equal columns! Go from 6 to 3 to 2 to 1, without the unevenness of 4 or 5 columns. Works on any number of items, as long as it's not prime. Though larger counts will require more 'steps'. And first codepen 2.0 pen! 🥳

A pro codepen account is such a flex, I get it. You're better than me

📕 Good read “Fluid Typography with progress()” by @matthewmorete.com I had no clue that CSS progress() function existed. This is so so so useful. master.dev/blog/fluid-t... #css

The rush of having a pen picked by @codepen.io

Fluid Typography With “progress()”, by @matthewmorete.com (@frontendmasters.com): https://master.dev/blog/fluid-typography-with-progress/?ref=frontenddogma.com #css #functions #typography #liquiddesign

Looking to have a newspaper effect as a background, without having a bunch of text duplicated in the html. My first attempt, hopefully to be improved. codepen.io/matthewmoret...

Wrote a new post for @frontendmasters.com 😄 Fluid Typography with Progress() master.dev/blog/fluid-t... Discussing an often unmentioned problem with pre-calculated fluid type and how we can fix it with progress(). Not supported everywhere yet, but with a little extra code it works in all browsers

Go to personalsit.es Hit the “go to a random site link” Enjoy

It's 2025, stop putting http-equiv="X-UA-Compatible" in your <head>

June is Pride Month. In this article, I explore several LGBTQ+ flags, how to recreate them using CSS and a single HTML element (fully responsive so they could double as icons), and share the history behind some of them. alvaromontoro.com/blog/68009/l... #css #webDevelopment #PrideMonth #CSSArt

I’m working on a CSS course: The Layout Maestro. 👉 Sign up for updates: layoutmaestro.ishadeed.com 📓 Read the note: ishadeed.com/note/layout-...

@cssweekly.com Hi Zoran, was trying to submit a link to you via the form on your website, but it doesn't seem to be working, keeps giving me an error. Just FYI!

Convert SVG path to #css Shape() path-to-shape.netlify.app Turns pixel based values into responsive percentages. Was very happy to discover the new shape() fully recreates the svg syntax, by far the hardest part is just parsing a svg path

clagnut.com/blog/2432 This has totally convinced me. No more max-inline-size: 60ch, long live max-inline-size: 30rem

Just to add to the idea of fallback with 'color-mix': you can get equivalent colours if you prepare blacks/whites that are the same as the base colour but with a different lightness codepen.io/matthewmoret... Ignore the weird purple shift in the preview...

At the time of reading, this website is at 27% battery life, adding a dimension of anxiety that I didn't know could exist

A short post on working with possibly invalid #css custom properties and their weird fallback rules frontendmasters.com/blog/custom-...

your outie always uses semantic html

Animating the gap between letters with some straight forward maths and CSS. Works regardless of character count, but until we get sibling-count() and sibling-index() you'll need to set these manually codepen.io/matthewmoret...