Skip to main content
CSS-Tricks
  • Articles
  • Notes
  • Links
  • Guides
  • Almanac
  • Picks
  • Shuffle
Search

Articles Tagged
clip-path

44 Articles
{
,

}
Direct link to the article Better CSS Shapes Using shape() — Part 4: Close and Move
art clip-path CSS functions css shapes

Better CSS Shapes Using shape() — Part 4: Close and Move

The shape() function's close and move commands may not be ones you reach for often, but are incredibly useful for certain shapes.
Temani Afif on Jul 7, 2025
Diagrammiong a rounded rectangular shape in three stages, first with sharp edges, then with points indicating where the curve control points are, then the completed shape.
Direct link to the article Better CSS Shapes Using shape() — Part 3: Curves
art clip-path CSS functions css shapes

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 Jul 7, 2025
Three circular shapes in a single row, including a partial pie and two semi-circles, one with rounded edges.
Direct link to the article Better CSS Shapes Using shape() — Part 2: More on Arcs
art clip-path CSS functions css shapes

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 Jul 7, 2025
Direct link to the article Better CSS Shapes Using shape() — Part 1: Lines and Arcs
art clip-path CSS functions css shapes

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 Jul 7, 2025
Direct link to the article CSS Grid and Custom Shapes, Part 3
clip-path css shapes grid hover images

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 Nov 11, 2022
Direct link to the article Fancy Image Decorations: Outlines and Complex Animations
clip-path gradients hover mask outline transition

Fancy Image Decorations: Outlines and Complex Animations

We’ve spent the last two articles in this three-part series playing with gradients to make really neat image decorations using nothing but the <img> element. In this third and final piece, we are going to explore more techniques using the …

Temani Afif on Jun 19, 2023
Direct link to the article Fancy Image Decorations: Masks and Advanced Hover Effects
clip-path gradients hover linear-gradient mask radial-gradient

Fancy Image Decorations: Masks and Advanced Hover Effects

Welcome to Part 2 of this three-part series! We are still decorating images without any extra elements and pseudo-elements. I hope you already took the time to digest Part 1 because we will continue working with a lot of gradients …

Temani Afif on Oct 28, 2022
Direct link to the article Fancy Image Decorations: Single Element Magic
clip-path conic gradients hover images mask multiple backgrounds

Fancy Image Decorations: Single Element Magic

As the title says, we are going to decorate images! There’s a bunch of other articles out there that talk about this, but what we’re covering here is quite a bit different because it’s more of a challenge. The challenge? …

Temani Afif on Oct 28, 2022
Direct link to the article CSS Grid and Custom Shapes, Part 2
clip-path css shapes grid hover mask

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 Nov 11, 2022
  • 1
  • 2
  • 3
  • ...
  • 5
  • Older

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Contact
  • Write for CSS-Tricks!
  • Advertise with us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • Bluesky
Back to Top