CSS Spring Easing Generator
A tool designed to intuitively generate spring animations for CSS linear(). Includes presets and customizable inputs for perceptual duration and bounce.
CSS
What are OKLCH colors?
Article about the OKLCH color model.
Easing Gradients
Supercharge your gradients with non-linear color mix and custom color spaces.
💡 CSS Tip! Save this one line of code for the future!
https://t.co/0Y2EdUyk3s No more hacky code trying to remove those spaces above and below an uppercase text. You can easily have a perfect centering for the text! pic.twitter.com/KRjZ5hy20F— CSS by T. Afif (@ChallengesCss) February 24, 2025
CSS one-liners with high-value gains
hyphens: auto;
to achieve a better visual balance where needed 🤌
— jhey ▲🐻🎈 (@jh3yy)
6 CSS Snippets Every Front-End Developer Should Know In 2025 · January 19, 2025
Toolbelt worthy, powerful, and meaningful CSS you'll need for 2025.
For your stacked elements:
Stop using border or box-shadow.
Start using mask.
— Brotzky (@brotzky_)
CSS Grid Layout: Асимметричная адаптивная сетка
В веб-дизайны сетки, как в Pinterest уже давно не являются чем-то новым. Но что, если нужно сделать блоки различной высоты, при этом сохранив адаптивность. Оказывается, это можно сделать, используя...
CSS Wrapped 2024
Join the Chrome DevRel team and a skateboarding Chrome Dino on a journey through the latest CSS launched for Chrome and the web platform in 2024.
🔥 TIL about `focusgroup`, an HTML attribute that creates a “group” of focusable elements (inputs, buttons…).
Users can then navigate between these elements using the arrow keys, like they do with radio buttons!
— Josh W. Comeau (@JoshWComeau)
If you're running a PWA and want to remove the status bar fill, check the code below ↓
— Bartek (@bartek_marzec)
Quick CSS Tip:
You can create a progressive blur effect using a single div and just 2 properties. Works best when your div is placed over an image and is more efficient than stacking multiple elements with increasing blur.
— Moritz Petersen (@moritzpetersen)
The latest in CSS and web UI: I/O 2024 recap | Blog | Chrome for Developers
Read all of the CSS and Web UI announcements from Google I/O 2024.
steal this dialog and popover snippet
- transitions
- entry/exit
- backdrop included
ready for richer design system integration
try on Codepen
— Adam Argyle (@argyleink)
3 CSS tips for styling textarea you probably didn't know about
https://t.co/JJkZgC1WTo
CSS magic: now you can animate height from 0 to auto via `calc-size(auto)`
Say goodbye to JS Calculate Height!
Combined with , a nearly perfect and exclusive Accordion component can now be implemented.
— 一丝 (@yisibl)
Scroll masking with CSS scroll animation as a progressive enhancement ⭐️
.scroller {
animation: mask-up;
animation-timeline: scroll(self);
animation-range: 0 1rem;
mask-composite: exclude;
}
@keyframes mask-up {
to { mask-size: 100% 120px, 100% 100%; }
}
— jhey ▲🐻🎈 (@jh3yy)
Been adding 4px of blur to animations recently and I kinda like it?
— Emil Kowalski (@emilkowalski_)
CSS Button Styles You Might Not Know – David Bushell – Freelance Web Design (UK)
The one where I demo some lesser-known CSS for stylin’ buttons
Lightning CSS
An extremely fast CSS parser, transformer, bundler, and minifier.
An HTML Switch Control
We’re very excited to introduce a new HTML form control as part of Safari 17.4: a switch.
12 Modern CSS One-Line Upgrades | Modern CSS Solutions
Sometimes, improving your application CSS just takes a one-line upgrade or enhancement! Learn about 12 properties to start incorporating into your projects, and enjoy reducing technical debt, removing JavaScript, and scoring easy wins for user experience.
Artur Bień on Twitter / X
Pure CSS way for creating album backdrops 🤓How it works 🧵👇 https://t.co/1gMmrChGqg pic.twitter.com/fWneA5hfHw— Artur Bień (@artur_bien) January 26, 2024
scroll padding
pic.twitter.com/istJfYiNXf— Paco (@pacocoursey) February 28, 2023
Gradient borders by using transparent borders
CSS Trick! ⚡️You can create gradient borders by using transparent borders 👀 No extra elements 🤙article { background: // layer them up with different origin! linear-gradient(var(--bg), var(--bg)) padding-box, var(--gradient) border-box; border: 4px solid… pic.twitter.com/zqkkjwFbgt— jhey ▲🐻🎈 (@jh3yy) October 13, 2023
Scroll-driven Animations: Shadow on header after scroll (Scroll-Timeline)
CSS only floating labels
We can detect if text input has value by using `:placeholder-shown` pseudo class. This little trick can then be used to create CSS only floating labels.
CSS Text balancing with text-wrap:balance - Ahmad Shadeed
A look at text wrap balancing in CSS
dvh, svh, lvh
A CSS challenge: skewed highlight — Vadim Makeev
Recently Sacha Greif challenged his Twitter followers to code a fancy highlighter effect using only CSS. Guess what? I took the bait and started coding!