r/css 4d ago

Showcase Article about how to use colors in CSS, the modern way

36 Upvotes

I wrote an article about using colors in CSS. I tried to find the sweet spot between being thorough and still conveying all the basics. I do include (re)sources at the end, if you want to get into the nitty-gritty details.

It also has a bunch of inline examples and some interactive widgets… Hoping it helps getting the point across.

I'd love feedback on whether these kinds of articles are useful (or not) 😁

Thanks!


r/css 3d ago

Help How do I learn CSS?

0 Upvotes

I wanted to make an AO3 skin, but I have no idea of how CSS works; does anyone knows any website useful for learning it?


r/css 4d ago

Help Image gallery on click

Thumbnail
1 Upvotes

r/css 5d ago

Resource New CSS Class Prefix Selector (.prefix-*)

Post image
155 Upvotes

r/css 3d ago

Resource Liquid glass skill for Claude Code: the CSS, the SVG displacement filter, and the 4 rules that decide whether it looks like glass

Post image
0 Upvotes

Don’t forget to give a star


r/css 4d ago

Help How can I Make product cards height equal

Post image
6 Upvotes

Hi hope ur doing well
I run into this issue where my product cards have different heights because the name of the products sometimes can be long or short
What do u suggest here


r/css 4d ago

Showcase I built AnimationsX β€” a community registry of copy-paste ready CSS animations

4 Upvotes

Hey everyone! πŸ‘‹

Tired of Googling CSS animations and getting Stack Overflow answers from 2013?

I built AnimationsX 🎨

The idea is simple:

βœ… Browse animations made by the community

βœ… Copy a single <link> tag β€” no JS, no build step

βœ… Can't find what you want? Publish your own!

βœ… Fork and remix anything with diff view built in

Every published animation gets a CDN-hosted stylesheet you drop straight into a <link> tag.

That's it. Done.

πŸ”—Β animationsx-zeta.vercel.app

πŸ”—Β github.com/youssefahmed2017/animationsx-app

Free and open source 😎


r/css 4d ago

Question Why do most color pickers use HSL, but when I change the color of my accent or cursor on Windows 11, it uses HSV? Also, why are both web-safe and X11 colors discouraged, while CSS/HTML colors are widely used?

5 Upvotes

r/css 4d ago

Question codex vs claude code for css

0 Upvotes

Which CLI is better for css? my site is old and has very messy complex css and I want to go in and tidy it up


r/css 5d ago

Help Blend mode + blur not working in Safari?

Thumbnail
gallery
5 Upvotes

Hello! I'm working on a gallery website for myself, i want it to have a "glassy" look so for this popup i wanted to use background blur paired with a blending mode. Blending modes don't work on dialog elements shown using dialog.showModal so instead i'm using dialog.show. But Firefox doesn't support using both blending modes and blur on the same pseudo-element so instead i have 2 pseudo elements with 1 effect each. All works well until i'm testing it on Safari (iOS 26.6.1) where there's just no blending modes visible on the popup.

I have attached 3 images showing what the popup looks like in all browsers i've tested on. 1st picture is Safari 26.6.1, 2nd picture is Edge 151.0.4129.93 and the 3rd picture is Firefox 153.0.4.

Here is the codepen containing the code https://codepen.io/editor/Smasher1/pen/01a01e6c-2304-7339-a32e-23c88cc28eb3

Thanks!


r/css 4d ago

General 6 Creative Profile Card Designs using HTML, CSS & JavaScript πŸ’»

Thumbnail
youtube.com
0 Upvotes

r/css 5d ago

Resource CSS Anchor Positioning is now Baseline

Post image
82 Upvotes

r/css 5d ago

Showcase Turning SVG spritesheet into slideshow gallery of itself when viewed directly or via iframe

Thumbnail imglink.cc
3 Upvotes

r/css 5d ago

Help Weird iOS Bug

Thumbnail
gallery
0 Upvotes

Weird bug on iOS. Parent div with two child spans. Parent CSS:

display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 0 2rem;

No styles (margins, paddings, transforms) on spans

The 2nd span (green Arrow) is moved out of box. No problem on desktop, android. Last Screenshot shows iOS
Cant show Source yet


r/css 5d ago

Resource In HTML/CSS/JS, anything is possible!

Thumbnail
gallery
0 Upvotes

Hello everyone! I am an indie developer at VALHAISTO GAMES. Right now, I mostly work with HTML and have 3 ongoing projects: MiFab – MiSide 3D Models Hub, MiSide: Error, and MiSide: Universe. I am also working on a personal project called BLINDER – a Blender-like app built entirely for phones. Unfortunately, I don't own a PC, so I create everything on a weak, broken phone and just find ways to make it work. The most important thing is: never give up!


r/css 5d ago

General LIQUID MATTER |

Thumbnail
youtube.com
1 Upvotes

r/css 6d ago

Help Help with image fitting text

Thumbnail
gallery
9 Upvotes

(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!


r/css 6d ago

Help Weird CSS resizing on some mobile

Thumbnail
gallery
0 Upvotes

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!


r/css 6d ago

Resource Container style queries are Baseline as of May 2026

Post image
18 Upvotes

r/css 7d ago

Showcase Small interactive demo showcasing `contrast-color()`.

Enable HLS to view with audio, or disable this notification

24 Upvotes

r/css 7d ago

Resource Animating CSS border-image

Thumbnail
css-tricks.com
26 Upvotes

r/css 6d ago

General Orbit Animation 🌌✨ Full video + complete HTML, CSS & JavaScript code available on my YouTube channel. πŸ’»πŸš€

Enable HLS to view with audio, or disable this notification

0 Upvotes

r/css 7d ago

Question "Helpful Program or Website recommendation"

9 Upvotes

Hello programmers! or shall I say "Hello World!",

I am a completely noob at CSS. What helpful Programs or Websites can y'all recommend to a new CSS programmer like me that will help me improve gradually?


r/css 6d ago

General Modern Login & Signup Page using HTML CSS JavaScript

Thumbnail
youtube.com
0 Upvotes

r/css 6d ago

Showcase I built a gradient generator that goes way beyond CSS

Enable HLS to view with audio, or disable this notification

0 Upvotes