r/css

Hello everyone - this community is in need of a few new mods, and you can use the comments on this post to let us know why you’d like to be a mod here. 

Priority is given to redditors who have past activity in this community or other communities with related topics. It’s okay if you don’t have previous mod experience and our goal, when possible, is to add a group of moderators so you can work together to build the community.

Please use at least 3 sentences to explain why you’d like to be a mod and share what moderation experience you have (if any).  

If you are interested in learning more about being a moderator on Reddit, please visit redditforcommunity.com. This guide to joining a mod team is a helpful resource. 

Comments from those making repeated asks to adopt communities or that are off topic will be removed. 

You can finally position tooltips, dropdowns, and menus relative to another element... in pure CSS. ☝️

It became newly available in January 2026 when Firefox 147 completed the set.

It’s still relatively fresh, and some advanced features (like certain `position-try` behaviors) still have gaps, so use progressive enhancement if you need to support older browsers.

Oh man, I'm so happy about this 🤟

Hello! I've been experiencing a strange bug that has never happened to me before, and I'm looking for some advice :)

I'm building a website for a client, and when I look at it on my mobile devices (iPhone 15 & Samsung Galaxy S10), it works perfectly in every browser!

However, when he (my client) looks at it on his mobile devices (also an iPhone 15 & an older Android phone), he gets a strange bug, regardless of the browser.

The buggy version seems to ignore the sizing I've defined for the titles of these filters and instead just uses the size of their content.

Has anyone experienced something similar? Any idea what could be causing this, or how I could fix it?

Thanks!

(SOLVED, thank you to everyone for helping me!)

Hello! CSS and HTML amateur here.

So, recently I've been trying to make myself a workskin on Ao3 that would have this image serve as a background for text. Currently, the image cuts off at the bottom, and it's even worse when there's different sizes of text.

What I want is the image to stretch or contract to fit the text, not be cropped.

Here's my code, my results, and the image I've used. Is there anything I'm doing wrong, or is what I'm trying to do impossible?

Edit: Here's the codepen. It looks the worst here!

Hey r/SideProject,

I’ve been working on AnyGradient, a gradient editor for designers and developers.

I started building it because most gradient generators I came across were either very basic CSS tools or focused on exporting images. I wanted something where I could create more complex gradients and then actually use them in a real project.

AnyGradient supports:

• OKLCH and Display-P3 colors
• different color interpolation methods
• linear, radial and conic gradients
• layered gradients and noise
• Image to Gradient tool
• export to CSS, Tailwind, React, React Native, SwiftUI, Android, Flutter, Figma, PNG, WebP
• a collection of ready-made gradients that can be opened and edited
• import gradient code

The main goal is to keep the visual editing experience simple while still giving you much more control when you need it.

I recently launched it and I’m now trying to figure out what’s actually worth improving or building next. Would love to hear what you think, especially if you’re a designer or developer who uses gradients in real projects.

Meet `contrast-color()`: You give it any color; it returns either `black` or `white`, whichever provides better contrast.

Shipped in Chrome 147, Safari 26, Firefox 146, and Edge 147 (April 2026).

Pure CSS that guarantees readable text.

PS. If you want occasional frontend tips in your inbox, you can join here: https://bits.iprodan.dev

I created a small interactive demo showcasing `contrast-color()`.

Go check it out https://iprodan.dev/l/contrast-color/

You can now style an entire component based on a CSS variable set on any parent. No prop drilling, extra classes, or JavaScript, just pure CSS reacting to context.

Now live in Chrome, Safari, Firefox, and Edge in the latest releases.

I haven't learnt about HTML or CSS and have done some searching to try and learn how to make a website layout but each thing I've seen isn't exactly what I'm looking for.

Question: How can I make a consistent sitewide layout with HTML (For footer and header, with consistent font/colours/etc)?

I'm currently using Nekoweb which is a free HTML/CSS/JS website builder, I'm wanting to make the image attached the layout for my website homepage with the frames either side, HOWEVER I only want the title, banner and buttons up the top as well as the Footer on every webpage with blank areas I can write in.

Essentially I want to make a blog or something alike to Fandom.com's wiki layout or the Backrooms Movie site layout.

What are the proper terms to use to search and learn about this stuff, for HTML coders here how can I do this?

This isn't ragebait, I just really need some help with this please 😅

Found these recently back and keep coming back to them three free color tools, no signup, nothing stored anywhere, one page with 3 handy simple tools for Web dev...

sharing in case it's useful to anyone here:

Color palette generator — https://thedesigntools.site/color-palette-generator/

WCAG contrast checker — https://thedesigntools.site/color-contrast-checker/

CSS gradient generator — https://thedesigntools.site/css-gradient-generator/

All free, no signup, runs right in the browser

i have like no css styling actually on this element (just whole page styling) but i'm trying to make the top of the text line up with the top of the image

i'm admittedly kinda terrible at this;;

A small comic where each panel shows a different clipping mode (border-box, padding-box, content-box, and text) but framed as four different "Collies."

Source: https://comicss.art/comics/254/

I wrote a full guide to CSS units: 11 chapters, every unit in CSS, in an order that actually makes sense to read.

And somehow, after years of using CSS, I still found a few things I’d never properly stopped to think about:

• vh and lvh are actually the same size. svh keeps space for the browser UI even when it disappears, while dvh changes as the UI moves.
• 1in is always 96px on a screen. Not “roughly.” By definition. Which also means cm, mm, pt, pc, and Q aren’t really physical units either.
• CSS doesn’t have 6 viewport units. It has 24. w, h, i, b, min, and max — each in v*, sv*, lv*, and dv* versions.

The guide goes from the familiar stuff — px, %, em, rem — into viewport and container units, fr, angles, time, resolution, and what happens when you start mixing all of them inside calc() and clamp().

There’s also a simple decision tree for choosing a unit, a cheatsheet with the formulas, and browser support written as actual dates instead of the wonderfully precise “supported in modern browsers.”

And if you’d rather keep the whole thing around, there’s a PDF version too.

https://cssunits.com

Enjoy :) And if I got something wrong, let me know. I’ll fix it.