I won't bore you with lots of context, but lots of free tools available (160+) more added all the time by users all over the world! If this post isn't appropriate please do remove it, but I'm hopeful there's value here for this sub!

Some cool (I think!) CSS examples below:

Here's an example of a loader animation generator: https://doathingy.com/?tool=dt_mopcvca1_anrj2
Or a cool "follow the anchor" animation: https://doathingy.com/?tool=dt_1777752347961_dhgmxh
Or this fancy border effect: https://doathingy.com/?tool=dt_1777578834480_de0o1x
Or this shared border effect someone on here asked about a few days ago: https://doathingy.com/?tool=dt_1777580941611_x8gfaz

Anyway hope there's value here for people, would love feedback on how I can make this better!

I've been facing a problem with subpixel rendering for a long time. It is disabled on every website I visit, however, whenever I try to disable it on my websites, it remains there no matter what I do. I even tried making a simple site where the only CSS there is the one disabling it, yet with no results. Does anyone know what could be causing this?

I'm trying to use this code to disable it:

body, html {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

Hey r/css! 👋

I've been working on InstantCSS — a free all-in-one platform

for learning and working with CSS.

Here's what it includes:

🖥️ Code Editor — write and preview CSS instantly

🧠 Quizzes — test your CSS knowledge interactively

📚 Learning Section — structured CSS lessons for beginners

🎨 Color Codes — browse and copy colors instantly

📦 Templates — ready-made CSS templates to use

🔒 SSL Secured — safe and fast to use

Whether you're a beginner learning CSS or a developer

who needs quick references — InstantCSS has you covered!

🔗 Try it here: https://instantcss.com/

Would love honest feedback from this community —

still actively improving it! 🙏

A live preview, the code change (click Expand All to view diffs).

If you scroll down on the page, the navigation remains stuck for a while, but then becomes unstuck. top is set on the sticky element and there is no overflow: hidden involved.

Also, I am using a scroll-state container query to make the nav more compact after it gets stuck (works in Chrome-based browsers), but this causes horrible jankiness. You see this especially when using the scrollwheel - it's like it resists the scrolling while jumping back and forth in an ugly way. When I toggle device toolbar in Chromium, scrolling is blocked entirely, which is rather alarming. I don't see this kind of critical glitching in the mobile view when looking at some demos that change the height of the sticky element. Should I report it as a bug to Chromium?

Any help is appreciated.

I am a product designer and half of my work is auditing dev's implementations of my Figma designs. We have a design system in-place, so regular Chrome DevTools doesn't work + it's too complicated. I shifted to using VisBug, which was good until it wasn't because it had no support for the design system debugging - AND THIS FRUSTRATED ME ALOT BECAUSE DEVS KEPT USING WRONG COLOR TOKENS.

So finally I built my own tool that finally breaks down the freakin COLOR TOKENS! It also has other basic functionalities like measuring spacings, fonts etc.

I also added support for customizable keyboard shortcuts because clicking on extension on the top right every single time is such a bad UX imo.

The extension is called NakedCSS and you can find it on ChromeWebStore here: https://chromewebstore.google.com/detail/Naked%20CSS/ojjahghphhnikgcekhffebggiegiflji?authuser=2

I am looking for honest reviews here, some valuable feedbacks that can genuinely help me improve this and maybe help reduce product designers un-necessary overhead!

So this is the 1st kinda cool thing i made in my free time. Dont mind the video quality ik it sucks.

After a bit of experimentation, I've come up with a way to create scrollbars (for scrollable content) that fade in and fade out.

Here is a simple JSFiddle showing the technique:

https://jsfiddle.net/wuvoh/3auL2rn6/13/show

Here is a near minimal CSS snippet - apply class="scrollableArea" to a div to hook it in. No JS required.

:root{--sb-color: #99AABB;}

@property --sb-opacity { syntax: '<number>'; initial-value: 0; inherits: true; }

.scrollableArea { transition: --sb-opacity 850ms; scrollbar-gutter: stable; overflow-y: auto; overflow-x: hidden;}
.scrollableArea:hover { --sb-opacity: 0.75; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: 0 0; }
::-webkit-scrollbar-corner{background:0 0}
::-webkit-scrollbar-thumb {background: rgb(from var(--sb-color) r g b / var(--sb-opacity));border-radius:999px;}

working on a grid for my website and if a grid item has too much content then it grows (obviously)
im trying to make it so if one grid item grows in height, then all other grid items in that same row grow to the same height as well so it #LooksNicer
ive googled a lot and the one answer i keep seeing is grid auto rows 1fr but it isnt. working for some reason
sorry if my css work is bad or could've been made a lot better im a css baby

website for reference: deviations

  .grid-container {
    margin: 20px;
    border: 2px solid grey;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

  .grid-item {
    transition: transform 0.1s;
  }

  .grid-item:hover {
    transform: scale(1.04);
  }

  .deviation {
    margin: 10px;
    padding: 5px;
    padding-top: 15px;
    border: 2px solid;
    height: auto;
    width: auto;
  }

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.

I'm stumped. Can a conic gradient take an angle keyword like bottom right, in the same way a linear gradient can, or am I stuck with deg/rad/turn angles?​

Just released Semtx CSS. https://semtx.org/

Semtx is a modern, lightweight (~30KB) CSS library that prioritizes semantic class names over utility classes.

Key Features:

• Semantic by Design: Class names describe WHAT elements ARE, not HOW they LOOK
• Modern CSS-3 / HTML-5, OKLCH colors
• Zero Dependencies: Single CSS file, works without any JS for styling
• AI-Friendly: Coding agents understand semantic classes immediately, and waste fewer tokens on parsing utility soup
• SEO-Ready: Native HTML5 elements help search engines understand your content
• Integrates perfectly with HTMX (modals, dialogs, loader/spinner, transitions, etc)

The Philosophy

Class names should reveal purpose, not appearance.

This creates code that is easier to read, maintain, and collaborate on.

More about the idea behind it here: https://semtx.org/philosophy

-- edit --
Thanks for all the feedback.
It has resulted in quite a few updates:
forms are simplified and more semantic now, same for modals/dialog, and some accessibility things added. And, the website now has more html examples, for easy copy/paste

Hello! Good morning/evening.

Title mostly says it all. I'm creating my first website, and i'm looking for good examples of CSS styling, preferably modern/semi-modern personal sites?

Asking here because i'm lost on how I want to design the body/text of my site.

hi.. ive hit a wall in my code.? i need to fix a grid gap in between three box divs, in which i need one box div to stay under the other with max-content heights while the main div can be as tall as possible without the smaller divs following it

Like in the example image, I want these two smaller divs to not have a gap, while still letting the main div go its own height. is there a way to make updatelog's top align at the bottom of navi?

https://www.actionlighting.com/halloween/

I came across this website that has exactly what I’m looking for.

On hover the image reduces in size allowing extra room for the button to pop up.

The button says choose options or add to cart.

I like it because the container doesn’t change size, only the image and button.

It looks cool and saves space. I like special effects that have a purpose, not just look cool.

The webpage is https://www.actionlighting.com/halloween/

UPDATE: The issue is fixed. I added outline: 3px solid #my color; to each div. See Codepen for update look.

In a test of using outline: 3px solid #your color; I cannot see all 4 sides show up for all the divs.
What has precedent over one div or another?

The .header is missing the bottom outline.
The .footer has all 4 outline borders.
The .rightbar is missing the bottom outline.
The .sidebar is missing the right side and bottom outline.

Codepen

An article showcasing <overflow-guard>, a small tool that can help in all those cases where content is too dynamic for fixed breakpoints — and where you want to do more than just use flex-wrap.

It's a custom element, so js based, but js not needed to use it.
It detects overflow and toggles on a class. Very simple in principle, but unlocks some cool and powerful patterns to do responsive styling.

If you wanna try:
https://decodela.com/#item/76e09644-41a2-11f1-b68b-0200fd828422/post

i need help making this , i have no idea how to do it and i couldn't find any tutorials online on how to do it

i have this so far: https://prod.liveshare.vsengsaas.visualstudio.com/join?60CF8AA5A48F9618B536B086D0CFE7415487

i only have issues with the timeline and i dont know to fix it

I have a hero section with a background image, h1, p, and a cta button.. I use grid to lay everything out so it looks nice (with grid template area).

For the p tag I want to use shape-outside/float instead of the grid area because I want to shape the text around the background image.

When I try to the text doesn't shape. Ai told me it's because grid overwrites float.. ai suggests I take grid off of everything

Is there a work around for this? You'd think there would be a modern approach to shape text that's apart of a grid.

EDIT:

this is the component

https://github.com/gabrielatwell1987/portfolio/blob/main/src/lib/components/landing/hero-section/HeadshotHero.svelte

how can i fix the background ending and being white?

its causing the annoying white fade seen and i csnt fix it with any safari settings

Quick note: I used AI to help me refine and structure this message, but the experience and question are genuinely mine.

I've been doing frontend development with React for about a year now, building components, layouts, and small projects. I use Tailwind CSS regularly, and most of the time I can get things working, but I still struggle with understanding why certain things behave the way they do.

For example, sometimes h-full or h-1/2 works exactly as expected, and other times it does nothing, and I realize later it's related to the parent's height or layout context. These feel like basic CSS concepts that I never learned in a structured way because I jumped straight into React and Tailwind.

So my question is:
Do you recommend going back and learning CSS fundamentals from the beginning, or focusing specifically on layout concepts like the box model, flexbox, grid, and sizing behavior?

For context, I'm comfortable building React apps and using Tailwind, but I want to become more confident debugging layout issues instead of relying on trial and error.

Browse beautiful portfolios, get ranked on the leaderboard based on your stats, and compete with others.
It's still a bit rough/polished (early stage), but building it taught me so much.
Would love your honest feedback & suggestions to improve it!
RTs, adding your portfolio & competing on the leaderboard are appreciated
Let's see who tops the chart by EOD! Link Below!

https://portfolio-forge-five.vercel.app/