CSS Blob Recipes
Blob, Blob, Blob. What's the most effective way to create blob shapes in CSS? Turns out, as always, there are many. Let's compare them together!
Articles Tagged
20 Articles
Better CSS Shapes Using shape() — Part 3: Curves
This is the third article in a series about the CSS
shape() function. We've covered drawing lines and arcs in previous articles and, this time, we look specifically at the curve command and how to use it for drawing complex shapes. 
Temani Afif
on
Better CSS Shapes Using shape() — Part 2: More on Arcs
This is the second part of a series that dives deep into the CSS
shape() command, continuing with a more detailed look at the arc command.
Temani Afif
on
Better CSS Shapes Using shape() — Part 1: Lines and Arcs
This is the first part of a series that dives deep into the shape function, starting with shapes that use lines and arcs.
Temani Afif
on
CSS Grid and Custom Shapes, Part 3
After Part 1 and Part 2, I am back with a third article to explore more fancy shapes. Like the previous articles, we are going to combine CSS Grid with clipping and masking to create fancy layouts for image …
Temani Afif
on
CSS Grid and Custom Shapes, Part 2
Alright, so the last time we checked in, we were using CSS Grid and combining them with CSS clip-path and mask techniques to create grids with fancy shapes.
Here’s just one of the fantastic grids we made together:…
Temani Afif
on
CSS Grid and Custom Shapes, Part 1
In a previous article, I looked at CSS Grid’s ability to create complex layouts using its auto-placement powers. I took that one step further in another article that added a zooming hover effect to images in a grid layout…
Temani Afif
on
Tricks to Cut Corners Using CSS Mask and Clip-Path Properties
We recently covered creating fancy borders with CSS mask properties, and now we are going to cut the corners with CSS mask and clip-path! A lot of techniques exist to cut different shapes from the corners of any element. …
Temani Afif
on
The Story Behind TryShape, a Showcase for the CSS clip-path property
I love shapes, especially colorful ones! Shapes on websites are in the same category of helpfulness as background colors, images, banners, section separators, artwork, and many more: they can help us understand context and inform our actions through affordances.
A …
