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

Articles Tagged
CSS functions

14 Articles
Direct link to the article Poking at the CSS if() Function a Little More: Conditional Color Theming
CSS functions

Poking at the CSS if() Function a Little More: Conditional Color Theming

The CSS if() function enables us to use values conditionally, which we can already do with queries and other functions, so I’m sure you’re wondering: What exactly does if() do? Let's look at a possible real-world use case.
Daniel Schwarz on Jun 25, 2025
Direct link to the article Lightly Poking at the CSS if() Function in Chrome 137
CSS functions

Lightly Poking at the CSS if() Function in Chrome 137

The CSS if() function was recently implemented in Chrome 137, making it the first instance where we have it supported by a mainstream browser. Let's poke at it a bit at a very high level.
Sunkanmi Fafowora on Jun 25, 2025
Direct link to the article Color Everything in CSS
color CSS functions

Color Everything in CSS

An introduction to "Color spaces", "Color models", "Color gamuts," and basically all of the "Color somethings" in CSS.
Juan Diego Rodríguez on Jun 20, 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
Direct link to the article Exploring the CSS contrast-color() Function… a Second Time
accessibility color CSS functions

Exploring the CSS contrast-color() Function… a Second Time

The contrast-color() function doesn’t check color contrast, but rather it outright resolves to either black or white (whichever one contrasts the most with your chosen color). Safari Technology Preview recently implemented it and we explore its possible uses in this article.
Daniel Schwarz on Jun 5, 2025
Direct link to the article Quick Hit #49
CSS functions

Quick Hit #49

Chrome 137 introduces the newly-specced if() function. Una Kravets posted a nice video overview and Temani Afif writes about it as well.…

Geoff Graham on Jun 3, 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 Jun 6, 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 Jun 6, 2025
Direct link to the article SVG to CSS Shape Converter
CSS functions resource shapes

SVG to CSS Shape Converter

Shape master Temani Afif has what might be the largest collection of CSS shapes on the planet with all the tools to generate them on the fly. There’s a mix of clever techniques he’s typically used to make those shapes, …

Geoff Graham on May 21, 2025
  • 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