Reposted by Matthew MoreteCodePen @codepen.io · 2h"Pixel Dissolve Mask Generator" by Matthew Morete codepen.io/editor/matth... + a very cool website! matthewmorete.com 172
Reposted by Matthew MoreteJane Ori 💚 CSS Runner 👩💻 @janeori.propjockey.io · 19/09/2026Staff 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 0146
Matthew Morete @matthewmorete.com · 19/09/2026A 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.ioPixel Dissolve Mask GeneratorA code demo by Matthew Morete created on CodePen 071
Matthew Morete @matthewmorete.com · 19/09/2026All 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 withcodepen.ioCorner-shapes with shape()A code demo by Matthew Morete created on CodePen 020
Matthew Morete @matthewmorete.com · 12/09/2026codepen.io/editor/matth... A small upgrade to use shape() so you can spell a full word with a single element! --letters: var(--w),var(--o),var(--r),var(--l),var(--d); --count: 5; Obviously thats a very clunky API but it's a fun wee experimentcodepen.ioClip Path Pixel Font (Shape)A code demo by Matthew Morete created on CodePen 100
Matthew Morete @matthewmorete.com · 12/09/2026A pixel font with clip-path on @codepen.io codepen.io/editor/matth...codepen.ioClip Path Pixel FontA code demo by Matthew Morete created on CodePen 030
Reposted by Matthew MoreteJakob E @jakob-e.bsky.social · 08/09/2026Great 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...blog.master.devFluid Typography with progress()With the `progress()` function in CSS we've got a new way to calculate the size for type based on the viewport without problems of the past. 0106
Matthew Morete @matthewmorete.com · 08/09/2026I 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 #sewingboxedbottompattern.netlify.appBoxed-Bottom Pattern GeneratorGenerate custom cutting plans and corner notches for any flat-bottom bag, pouch, or fabric container. 110
Matthew Morete @matthewmorete.com · 29/08/2026Probably 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!minifyshape.matthewmorete.comCSS Shape() MinifierOptimise and minify shape() functions without impacting rendering 160
Matthew Morete @matthewmorete.com · 27/08/2026TIL: '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.' 010
Matthew Morete @matthewmorete.com · 25/08/2026Some 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.comminifycalc.matthewmorete.comCSS Calc() MinifierCondense calc() functions to their smallest form 000
Matthew Morete @matthewmorete.com · 22/08/2026TIL calc(10px + 0) is invalid, but calc(10px + 0px) isn't. Learning when unitless zeros are acceptable is so confusing 😭 030
Matthew Morete @matthewmorete.com · 21/08/2026Small 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.compathtoshape.matthewmorete.comPath to CSS Shape()Convert SVG path data to CSS shape() function. 000
Matthew Morete @matthewmorete.com · 19/08/2026This 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.comshapetopolygon.matthewmorete.comCSS Shape() to Polygon()Create fallbacks or replacements for shape() 120
Matthew Morete @matthewmorete.com · 14/08/2026Playing 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() 000
Reposted by Matthew MoreteJens Oliver Meiert @meiert.com · 09/08/2026Western Hypocrisy Is Western Supremacism: An argument against double standards, separation, and a hierarchy of worth.meiert.comWestern Hypocrisy Is Western SupremacismAn argument against double standards, separation, and a hierarchy of worth. 011
Matthew Morete @matthewmorete.com · 06/08/2026@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 100
Matthew Morete @matthewmorete.com · 02/08/2026codepen.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! 🥳codepen.ioResponsive Auto Grid, using factors of child count for equal columnsA code demo by Matthew Morete created on CodePen 000
Matthew Morete @matthewmorete.com · 02/08/2026A pro codepen account is such a flex, I get it. You're better than me 010
Reposted by Matthew MoretePaweł Grzybek @pawelgrzybek.com · 18/07/2026📕 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... #cssmaster.devFluid Typography with progress()With the `progress()` function in CSS we've got a new way to calculate the size for type based on the viewport without problems of the past. 0112
Reposted by Matthew MoreteFrontend Dogma @frontenddogma.com · 08/07/2026Fluid Typography With “progress()”, by @matthewmorete.com (@frontendmasters.com): master.dev/blog/fluid-typography-wi… #css #functions #typography #liquiddesignmaster.devFluid Typography with progress()With the `progress()` function in CSS we've got a new way to calculate the size for type based on the viewport without problems of the past. 021
Matthew Morete @matthewmorete.com · 07/07/2026Looking 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...codepen.ioNewspaper Vibes... 000
Matthew Morete @matthewmorete.com · 29/06/2026Wrote 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 browsersmaster.devFluid Typography with progress()With the `progress()` function in CSS we've got a new way to calculate the size for type based on the viewport without problems of the past. 010
Reposted by Matthew MoreteAndy Bell @bell.bz · 15/01/2026Go to personalsit.es Hit the “go to a random site link” Enjoypersonalsit.esPersonalSit.esPersonal sites are sick as hell, so this site was built so we can all discover each other's. This directory of links are by folks that want to share their site with the world. 613929
Reposted by Matthew MoreteRick Viscomi @rviscomi.dev · 04/06/2025It's 2025, stop putting http-equiv="X-UA-Compatible" in your <head> 2206
Reposted by Matthew MoreteÁlvaro Montoro @alvaromontoro.com · 01/06/2025June 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 #CSSArtalvaromontoro.comLGBTQ+ Flags Coded in CSSWhat different LGBTQ flags mean and how to code them with CSS and a single HTML element. A little bit of history and a little bit of tech for this Pride Month. :: Blog post at Alvaro Montoro's Persona... 54517
Reposted by Matthew MoreteAhmad Shadeed @ishadeed.com · 25/05/2025I’m working on a CSS course: The Layout Maestro. 👉 Sign up for updates: layoutmaestro.ishadeed.com 📓 Read the note: ishadeed.com/note/layout-...layoutmaestro.ishadeed.comThe Layout MaestroAn interactive course focused on how to think, build, and test a layout with real-world examples. 212214
Matthew Morete @matthewmorete.com · 09/05/2025@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! 130
Matthew Morete @matthewmorete.com · 09/05/2025Convert 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 pathpath-to-shape.netlify.appPath to CSS ShapeConvert SVG path data to CSS shape() function. 000
Matthew Morete @matthewmorete.com · 20/03/2025clagnut.com/blog/2432 This has totally convinced me. No more max-inline-size: 60ch, long live max-inline-size: 30remclagnut.comUse of ch unit considered inappropriate (in certain circumstances)When did we start using the ch unit to specify the maximum length for a line of text in CSS? To do so makes assumptions that don’t necessarily hold up, and there are more appropriate units to use. Als... 030
Matthew Morete @matthewmorete.com · 12/03/2025Just 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...codepen.ioColor-mixing with different blacks... 020
Reposted by Matthew MoretePavel @spavel.bsky.social · 12/03/2025At the time of reading, this website is at 27% battery life, adding a dimension of anxiety that I didn't know could existsolar.lowtechmagazine.comLOW←TECH MAGAZINEThis is a solar-powered website, which means it sometimes goes offline 57313
Matthew Morete @matthewmorete.com · 28/02/2025A short post on working with possibly invalid #css custom properties and their weird fallback rules frontendmasters.com/blog/custom-...frontendmasters.comCustom Property FallbacksThis post starts with quite a tricky little quiz about what a color value resolves to be. 063
Matthew Morete @matthewmorete.com · 08/02/2025Animating 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...codepen.ioSimple Animated Text Gap... 010
Matthew Morete @matthewmorete.com · 09/01/2025#CSS 3D Keys ⌨️ Uses 3d transforms and some simple trigonometry to calculate the sides of each key. Relative color syntax for the different shades. I had many failed attempts at adding some form of rounding, before compromising with this stylised look codepen.io/matthewmoret... 131
Matthew Morete @matthewmorete.com · 29/12/2024Updated my fluid size calculator to now support up to 3 size/viewport pairs! You can even plateau the middle value if needed. Guaranteed to make the most complicated clamp you've ever used 🗜️ fluidsize.com 010
Matthew Morete @matthewmorete.com · 21/12/2024codepen.io/matthewmoret... Saw an infinitely moving plane in a film, and then spent the rest of the movie on my phone coding this for no reasoncodepen.ioCSS Infinite plane... 030
Matthew Morete @matthewmorete.com · 13/12/2024Squarespace allows custom css but rewrites 'calc(10vw + 2rem)' as '12vw' and I'd love to know who thought that was a good idea 010
Matthew Morete @matthewmorete.com · 08/12/2024I hate writing clamp() where I just guess what the preferred value should be, so I made a tool to help calculate it! fluidsize.com I’ve used this as a sass function for a while but I’m happy to have it now available anywhere. Hopefully someone out there finds it of use as well! #css #webdevfluidsize.comFluid SizeCalculate CSS clamp values for fluid sizing 040
Reposted by Matthew MoretePhil Hawksworth @philhawksworth.dev · 06/11/2024I made you a little something. Help yourself to this little SVG+CSS flutter effect for your links to your @bsky.app account. (Psst. And publish the links to your @bsky.app account) flutterby.philhawksworth.dev 3836068
Matthew Morete @matthewmorete.com · 24/11/2024I needed a perfectly even background grid, and while @css-only.dev's grid line generator got me 90% of the way there, I made a quick demo of how I made it work properly for my use case. Demo: codepen.io/matthewmoret... Gradient Generator: css-shape.com/grid-lines/ 110
Matthew Morete @matthewmorete.com · 22/11/2024How would you label a radio group? Each input gets it's own label, but what about the group. A fieldset with a legend? A label without a for attribute? Seen it done so many different ways and am never sure 000
Matthew Morete @matthewmorete.com · 04/11/2024A layered split text effect using an svg filter for this weeks @codepen.io challenge. No duplication, editable text and all that good stuff codepen.io/matthewmoret... 000
Matthew Morete @matthewmorete.com · 07/05/2024No JS + no text duplication text marquee, with slow on hover. I usually reach for `text-shadow` to this, but that requires a little JS to have the offsets be calculated exactly. SVG filters with primitiveUnits='objectBoundingBox' solves that problem entirely! #css #svg #webdevcodepen.ioSVG filter + CSS only Text Marquee... 000
Matthew Morete @matthewmorete.com · 22/04/2024This took a lot of learning to get working, infinite text marquee that slows down on hover, CSS only: codepen.io/matthewmoret... The trick here is to use 'animation-composition: add' to apply a reduced negative version of the current animation at the same time.codepen.ioCSS only marquee with slow on hover... 000