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

Articles Tagged
art

14 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
Direct link to the article CSS Blob Recipes
art blobs css shapes

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!
Juan Diego Rodríguez on Jun 27, 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 Jun 6, 2025 Updated 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 May 30, 2025 Updated 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 May 23, 2025 Updated on Jul 7, 2025
Direct link to the article Mondrian Art in CSS From 5 Code Artists
art

Mondrian Art in CSS From 5 Code Artists

Mondrian is famous for paintings with big thick black lines forming a grid, where each cell is white, red, yellow, or blue. This aesthetic pairs well with the notoriously rectangular web, and that hasn’t gone unnoticed over the years with …

Chris Coyier on Jan 14, 2022
Direct link to the article Very Extremely Practical CSS Art
art

Very Extremely Practical CSS Art

I’ve always enjoyed the CSS art people create, but I’ve never ventured into it much myself. I’m familiar with many of the tricks involved, but still find it surprising every time: the way people are able to make such fluid …

Miriam Suzanne on Dec 8, 2020
Direct link to the article Let’s Make Generative Art We Can Export to SVG and PNG
art generator randomize

Let’s Make Generative Art We Can Export to SVG and PNG

Let’s say you’re a designer. Cool. You’ve been hired to do some design work for a conference. All kinds of stuff. Website. Printed schedules. Big posters for the rooms. Preroll slides. You name it.

So you come up with an …

Chris Coyier on Aug 19, 2020
Direct link to the article Advice for Complex CSS Illustrations
art css shapes

Advice for Complex CSS Illustrations

If you were to ask me what question I hear most about front-end development, I’d say it’s“How do I get better at CSS?”. That question usually comes up after sharing a CSS illustration I have made. It’s something I …

Jhey Tompkins on Jun 17, 2020 Updated on Jun 20, 2020
  • 1
  • 2
  • 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