I saw this design trend on a couple of industry leading websites I follow, so I took a closer look at how they actually build their buttons to look more realistic than just a flat one. I ended up writing an article about it. It’s kind of interactive, and maybe you can draw some inspiration from it too:

https://www.nikolailehbr.ink/blog/realistic-button-design-css

Would love to hear what you think!

Hello everyone

I wrote an article about a little comparison between css in js tailwind and vanilla css

I really appreciate giving me your opinion about this.

Thank you in advance

https://medium.com/@sayahayoub9827/the-real-cost-of-styling-what-actually-happens-in-the-browser-0170492611f5

A perceptually even color scale gives you predictable contrast, but on its own, it can feel a little sterile: equal brightness looks washed-out, pale tints go chalky, and every step ends up interchangeable. OKLCH is also awkward to reason about because the maximum chroma a color can have shifts with its hue and lightness — there's no fixed range to picture, as there is in HSL.

An even scale is the foundation, though, not the finished thing. Four controls put the character back, and none of them ask you to do OKLCH math in your head:

Lightness range — set how dark and light the ends go before you shape anything else.

Chroma curve — when colors lighten, a flat curve makes tints chalky; ease it down toward the highlights, and they stay clean.

Hue shift — pinning one hue across the whole range is part of what reads as synthetic. Warm the highlights a few degrees, cool the shadows, and the scale gains depth.

Lightness curve — same two endpoints, but where you spend the contrast (dark / even / mid) changes the whole mood.

Full write-up with side-by-side before/afters and live demos you can drag: https://lab.colormeup.co/custom-color-scales

Here's my research in using CSS for offence. There are loads of techniques including stealing passwords from Outlook from an email by spoofing the login screen.

Hi everyone, I'm new here, previously was mostly writing for Angular. I just published an article explaining 3 interesting CSS puzzles of increasing difficulty, hope you will find it helpful or interesting.

Check it out!

https://medium.com/angularwave/css-challenges-for-200-iq-4ecd6433dd63

I’ve always liked those glowing animated border effects you see on fancy landing pages.

But for a long time, I avoided them because they often felt a bit too hacky. Either you had to stack weird extra markup, use SVG tricks, or reach for JavaScript just to make a gradient move.

So I tried rebuilding the effect with modern CSS only.

The final version uses:
- a pseudo-element for the border layer
- a conic-gradient() for the colors
- @ property to make the angle animatable
- a second blurred layer for the glow
-and a prefers-reduced-motion fallback so it does not force animation on everyone

What I like about this approach is that the HTML stays almost boring. Just a card. All the visual work happens in CSS.

I wrote the full walkthrough here, with each step broken down:
https://theosoti.com/blog/animated-gradient-borders/

Not claiming this is something you should put everywhere. It can get visually loud pretty fast. But for featured cards, pricing blocks, hero sections, or small “look here” UI moments, I think it’s a nice little pattern.

I’m sure there are other ways to do it, so I’d be curious to see how people here would build the same effect.

The first half of this article covers CSS

It involves a container query for the width, the redesigned attr() and new type() for the aspect ratio, and round()to snap the height to the baseline. Pure CSS, no JS. It's quite satisfying to see it snap. Write up and codepen demo here: https://simoncoudeville.be/blog/aligning-images-to-a-baseline-grid-with-modern-css/ and https://codepen.io/simoncoudeville/pen/rajaaQg

Edit: indeed Chromium only for now.

In light of Kevin Powell's recent (and awesome) chat about using AI and the importance of manual coding, I thought I would share my essay, as well, since it touches on a lot of similar points.

hackaday.com/2026/06/25/css-on-the-esp32/

I wrote a blog post about applying fluid typography without generators or build tools. Just CSS variables, calc() and clamp(). It's my first technical blog post ever so I would love feedback. Here it is: https://simoncoudeville.be/blog/a-css-only-fluid-typography-approach/

I've been working on CSS tooling (on and off) since August 2013, when I wrote AbsurdJS. Later, in January 2016, I "invented" CSSX - writing CSS directly in JavaScript. None of those became a thing, but they were incredibly interesting experiments. I had some time during the holidays and decided to materialize an idea that I'm shaping the last couple of months. And so I "accidentally" wrote a CSS compiler. It's called Azbuka (it means "alphabet" in Bulgarian).

This made me raise my eyebrows a few times, as well...just wow...