Search
Let’s Use the Emergent CSS random() Function in all the Browsers
31.8.2026
The journey to create a polyfill for the upcoming CSS random() function that works in all browsers.
Let’s Use the Emergent CSS random() Function in all the Browsers originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well
@custom-media
3.6.2026
The CSS @custom-media at-rule allows creating aliases for media queries.
@custom-media originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well
@function
3.6.2026
The @function at-rule defines CSS custom functions. These custom functions are reusable blocks of CSS that can accept arguments, contain complex logic, and return values based on that logic.
@function originally handwritten and published with love on CSS-Tricks. You should really get...
Computing and Displaying Discounted Prices in CSS
14.5.2026
A clever use of CSS to calculate and display a discounted product price by providing a base price and discount amount, featuring modern CSS features like attr(), mod(), and round().
Computing and Displaying Discounted Prices in CSS originally handwritten and published with love on CSS-Tricks....
The Importance of Native Randomness in CSS
30.4.2026
We're getting new functions for generating random numbers in CSS! But the road to get here has been a long and winding one.
The Importance of Native Randomness in CSS originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well
Making Complex CSS Shapes Using shape()
2.4.2026
Creating rectangles, circles, and rounded rectangles is the basic of CSS. Creating more complex CSS shapes such as triangles, hexagons, stars, hearts, etc. is more challenging but still a simple task if we rely on modern features.
Making Complex CSS Shapes Using shape() originally published...
Abusing Customizable Selects
11.3.2026
Let’s go over a few demos using the new customizable <select> feature that may be wild, but also give us a great chance to learn new things in CSS.
Abusing Customizable Selects originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter
Spiral Scrollytelling in CSS With sibling-index()
17.2.2026
Lee accepts a challenge: arranging text in a spiral that animates as a vortex on scroll... all in CSS.
Spiral Scrollytelling in CSS With sibling-index() originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter
Responsive Hexagon Grid Using Modern CSS
23.1.2026
A while back, Temani tacked a repeating grid of hexagon shapes. Well, he's updated it with modern CSS features that result in fewer magic numbers. And it's impressive!
Responsive Hexagon Grid Using Modern CSS originally published on CSS-Tricks, which is part of the DigitalOcean family. You should...
Creating Scroll-Based Animations in Full view()
10.12.2025
It’s not that hard to do! Preethi shows you how it's really the same old animation you’re used to writing in CSS, only applied on a view timeline instead of a normal timeline.
Creating Scroll-Based Animations in Full view() originally published on CSS-Tricks, which is part of the DigitalOcean...
The Range Syntax Has Come to Container Style Queries and if()
13.11.2025
Being able to use the range syntax with container style queries — which we can do starting with Chrome 142 — means that we can compare literal numeric values as well as numeric values tokenized by custom properties or the attr() function.
The Range Syntax Has Come to Container Style Queries...
The “Most Hated” CSS Feature: tan()
3.11.2025
Last time, we discussed that, sadly, according to the State of CSS 2025 survey, trigonometric functions are deemed the “Most Hated” CSS feature.
That shocked me. I may have even been a little offended, being a math nerd and …
The “Most Hated” CSS Feature: tan()...
Sequential linear() Animation With N Elements
15.10.2025
Let’s suppose you have N elements with the same animation that should animate sequentially. Modern CSS makes this easy and it works for any number of items!
Sequential linear() Animation With N Elements originally published on CSS-Tricks, which is part of the DigitalOcean family. You should...
The thing about contrast-color
8.10.2025
One of our favorites, Andy Clarke, on the one thing keeping the CSS contrast-color() function from true glory:
For my website design, I chose a dark blue background colour (#212E45) and light text (#d3d5da). This
…
The thing about contrast-color originally published on CSS-Tricks, which...
CSS Typed Arithmetic
24.9.2025
Starting in Chrome 140, we'll be able to calculate numeric values with mixed data types. Sounds small, but Amit demonstrates how big a deal this is, calling it Computational CSS.
CSS Typed Arithmetic originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get...
What You Need to Know About CSS Color Interpolation
5.9.2025
Color what? Sunkanmi Fafowora explains how an everyday task for CSS can be used to create better colors experiences.
What You Need to Know About CSS Color Interpolation originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter
Should the CSS light-dark() Function Support More Than Light and Dark Values?
2.9.2025
The light-dark() function is currently designed to support just two color schemes. Should it support others? Sunkanmi Fafowora says yes and no.
Should the CSS light-dark() Function Support More Than Light and Dark Values? originally published on CSS-Tricks, which is part of the DigitalOcean...
We Might Need Something Between Root and Relative CSS Units for “Base Elements”
13.8.2025
I've come to realize that perhaps we need to have a unit between root and relative values. This would bring about a whole new possibility when creating reusable components.
We Might Need Something Between Root and Relative CSS Units for “Base Elements” originally published...
Better CSS Shapes Using shape() — Part 4: Close and Move
7.7.2025
The shape() function's close and move commands may not be ones you reach for often, but are incredibly useful for certain shapes.
Better CSS Shapes Using shape() — Part 4: Close and Move originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter
Poking at the CSS if() Function a Little More: Conditional Color Theming
25.6.2025
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.
Poking at the CSS if() Function a Little More: Conditional Color Theming...