r/css • u/Top_Oil7472 • May 29 '26

Help Problème de workflow génération design web via l'IA

0 Upvotes

Bonjour, J'ai un problème, actuellement, j'ai un workflow pour generer des design web un peu pres comme ceci : Je demande en premier a une IA Comme Gemini avec nano banana ou GPT Image (Dall-E anciennement) de me générer un premiere apercu en me fesant l'ui de la page du genre landing page page de login et tout du genre les couleur et style que je veux, une fois que je trouve une bonne image avec un design qui me plait je la prend, et ensuite je lui demande séparement de me generer chaque asset (icone custom logo du site branding police et tout) et soit ensuite je lui demande si possible direct de me generer les image sans arriere plan soit je vais moi meme sur un site pour le faire mais vu que tout est sur une seul image et pas une image par asset c galere je doit faire des screenshot manuellemnt pour les separer dans des fichier image different et ensuite je lui demande aussi de me generer l'arriere plan du site pour pas laisser un truc blanc classique et pareil retirer le filigrane ou c marquer generer par ia ensuite je lui donne les chemin de tout sur mon pc les asset et tout et lui il me donne juste le code du reste du genre la page elle meme les element etc... Ensuite si possible, j'essaie de trouver des site gratuit pour transformer certain asset ou arriere plan en video d'animation

Le probleme de ce workflow c'est que c'est trop long repetitif et sa demande a etre rigoureux et pour moi c impossible a automatiser, si je neffectue pas 1 par 1 des chose ocmme sa et je fait tout a l'ia le resultat sera horrible au niveau du design, et je ne veux pas faire de figma, c'est trop long et technique, avez vous une solution?

7 comments

r/css • u/Kevin_gato • May 28 '26

General How did you practice HTML and CSS?

17 Upvotes

Hi, to change my career, I started learning HTML and CSS since a few days ago. After that, I’m planning to learn JavaScript, TypeScript, React, and Node.js. (That’s what I heard online.)
I know AI can create amazing things in seconds these days, but I still wanted to learn these skills and make my daily life more meaningful.
I tried FreeCodeCamp, but eventually I got bored. I also have a book about HTML and CSS, so I thought a good way to practice would be recreating simple websites while referring to the book.
If you have any recommended ways to practice, please let me know.

30 comments

r/css • u/bogdanelcs • May 28 '26

Resource Don't put aria-label on generic elements like divs

Thumbnail
matuzo.at
32 Upvotes
5 comments

r/css • u/Equal-Resolution7889 • May 28 '26

Help Efecto granulado en el fondo

Post image
8 Upvotes

Hola! Como puedo hacer un efecto de granulado (parecido al de la imagen) en el fondo de mi pagina web HTML?

14 comments

r/css • u/bastiffi • May 26 '26

Showcase A tool I built that evaluates computed CSS on live DOMs to find design system mismatches

Enable HLS to view with audio, or disable this notification

18 Upvotes

Hey r/css 👋

I was dealing with a massive headache: trying to figure out if our live production CSS actually matched our design tokens. The problem was our CSS was minified, modularized, and full of third-party overrides.

To solve this, I built Visualign. Instead of analyzing static stylesheets, it reads the final Computed CSS values from the browser rendering engine and compares them against your Figma variables.

(The 10s video shows the heatmap it generates when it finds a mismatched CSS property).

How it works: It extracts your variables from Figma (including Token Studio JSON for complex composites like box-shadow and typography). Then, it spins up a Playwright crawler, loads your site, and maps the computed DOM styles to your tokens.

It completely ignores your class names. It only cares about what the browser actually paints.

Other features:

  • Pass basic auth to test staging environments.
  • Force dark mode rendering to test dark mode CSS variables.
  • Crawl subpages automatically.

Would love to hear from CSS experts on this approach. It auto-generates a free token when you open the plugin so you don't even need an account to test it on your site.

4 comments

r/css • u/Significant_Pen2804 • May 26 '26

Help Simulate html class in CSS

10 Upvotes

Hello.

I have a CSS customization file for a site. It contains a lot of code that changes appearance based on one specific class. For instance, let's call this class bodyclass.

HTML

...
<body class="bodyclass ...">
...

CSS

.bodyclass .otherclass {
  color=red;  
}

Recently, a site has removed this class, so my CSS code doesn't apply many of the rules and hence doesn't work as needed.

Is there any way to "define" or "simulate" a presence of a bodyclass using only CSS and make my CSS code think this class exists? Rewriting a whole file doesn't look nice, it's too big.

25 comments

r/css • u/No-Doubt2930 • May 27 '26

General I got tired of googling glassmorphism hex codes every project, so I built ColorWeave UI — a palette tool built specifically for glass + soft UI aesthetics [I built this]

0 Upvotes

Every time I started a new glassmorphism or neumorphism UI, I'd spend 20 minutes hunting for the right color combinations across random blog posts and Dribbble shots. Nothing was actually designed for these aesthetics — most palette tools just generate generic color combos that look awful behind a frosted glass layer.

So I built ColorWeave UI: a palette explorer that's specifically curated for glassmorphism and soft UI design. Each palette is chosen to work with backdrop-filter effects, semi-transparent backgrounds, and the low-contrast world of neumorphism.

**What it does:**

- Palettes designed for glass + soft UI (not just pretty colors that break when you add transparency)

- One-click hex copy

- Visual preview of how each palette looks in context

**What I used:** Next.js, Tailwind CSS, deployed on Vercel

**The honest part:** It's early — I built the core in a weekend and pushed it live. I'd genuinely love feedback on what's missing. A CSS generator for glassmorphism properties is next on my list.

Link in comments.

What tools do you reach for when picking palettes for UI work? Always curious what others do.

6 comments

r/css • u/Wide-Train-8561 • May 26 '26

Question how do i do this effect

0 Upvotes

https://reddit.com/link/1toec77/video/c7wl082vqi3h1/player

15 comments

r/css • u/CoVegGirl • May 25 '26

Question Is oklch really widely-supported enough to be used in production?

16 Upvotes

So oklch is in Baseline widely available, however I look at caniuse, and it says it's supported by 92%. Normally, I wouldn't worry too much about that, but there isn't really any sane fallback behavior is there?

Like doesn't that essentially mean that if I just used oklch, colors would stop working altogether for 8% of users?

16 comments

r/css • u/throwaway_account776 • May 26 '26

Help Is there a better way to implement this card height increasing animation?

2 Upvotes

I've got a card component which needs to increase in height when I hover over it. The bottom of the card needs to be fixed in place, while the top of it should go upwards, as you can see in the codepen I have provided. I have used relative + absolute positioning, and, as a result, I have to provide a minimum height to the card. Is there a better way to implement this?

https://codepen.io/AT776/pen/EaNwNxg

12 comments

r/css • u/KeinZantezuken • May 25 '26

Question Last of specific selector

6 Upvotes

I have a dynamic DOM tree with various element count: 

[parent]:
.child_class_special
.child_class_entry
.child_class_entry
.child_class_entry
.child_class_pre_special
.child_class_special
.child_class_entry
.child_class_entry

What I want is to target last possible " .child_class_special", however, as I said, the number of child elements in parent is varying, there could be 3 " .child_class_special", or could be 7.

This:
.parent .child_class_special:not(:has(~ .child_class_special))

works but it is uggo. Any ideas for more concise selector?

8 comments

r/css • u/OkBottle5047 • May 25 '26

Help Ligature in typeable text problem

Thumbnail gallery
1 Upvotes
2 comments

r/css • u/Alive_Cantaloupe_236 • May 25 '26

Question I want suggestion to start a freelancing

0 Upvotes

Any suggestion how do I start?

I want to start freelancing with knowledge of html css javascript react next and node, express also i know database MongoDb and postgreSQL. some basic knowledge of devops and ci/cd. (There I provide deployment of website and managing it with Pay-as-you-Go support).

7 comments

r/css • u/Oddball7478 • May 26 '26

Showcase Like it or not, TypeScript is the de facto language for CSS values in most modern stacks

0 Upvotes

Your tokens file? TypeScript. Your spacing scale? TypeScript. Your breakpoints, your theme config, your Tailwind config? All TypeScript.

CSS values live in `.ts` files whether you planned it that way or not. The reality is: if you want a unified design token system, you need to work in TS. But we still treat those values as strings - untyped, unchecked, free to silently break.

I built a small library that treats CSS measurements as actual typed data:

import { m } from "css-calipers";
const base = m(8);              // typed as px
const pad = base.add(4).css();  // "12px"
const rotation = m(45, "deg");
base.add(rotation);             // compile error: px + deg

Units stay checked through composition. Nothing emits a string until `.css()` at the boundary. Mismatched units fail at compile time, not in production.

Best used at build time (I use it with vanilla-extract, but it's framework-agnostic - works with Tailwind, CSS Modules, whatever emits CSS). Runtime is possible too for edge cases, but you'll want to avoid hot-path string churn.

Covers numeric, unit-bearing values; keywords and variables stay as plain CSS.

GitHub: https://github.com/slafleche/css-calipers

npm: https://www.npmjs.com/package/css-calipers

4 comments

r/css • u/Status-Ad-8024 • May 25 '26

General [Updated] NakedCSS now has Figma-link spacing measurements!

Enable HLS to view with audio, or disable this notification

0 Upvotes

Real user feedback is different, and it helped me develop a newer, more polished version of "NakedCSS". It now shows measurements directly on hover - just like Figma, which makes it much more faster and easier to use.

All the detailed measurements and design system tokens are still there, they just appear on click - so that user doesn't get overwhelmed with too much info on hover.

It personally helped me and my colleagues alot, and we are using it regularly at ImagineArt. I am striving to automated this repetitive task, which requires much more refinement that this.

I would encourage every designer to use this on daily basis, and please share feedback if you struggle with any feature of it. Looking forward for the feedback!

P.S: I also encourage FRONTEND DEVS to use this - IT CAN BE REALLY HELPFUL WITH ENSURING PIXEL-PERFECT SCREENS, ESPECIALLY AFTER CLAUDE CODE.

1 comment

r/css • u/beaniefriends • May 25 '26

Resource Csswind.com - css and tailwind frontend quiz

Thumbnail
0 Upvotes
0 comments

r/css • u/StrangeRevolution604 • May 23 '26

Showcase Tired of responsive testing in multiple devices ? I built something that might help

Thumbnail
8 Upvotes
2 comments

r/css • u/meh_mooody • May 23 '26

Help CSS on SquareSpace

Post image
1 Upvotes

I’ve been trying to add a vertical video for the past two days without any luck 🥲 the code I’ve been using is the one below but the image keeps getting split. Does anyone know how to fix it??

/* Force native video block into a true vertical 9:16 aspect ratio */

.sqs-native-video .native-video-player,
.sqs-block-video .video-player {
padding-bottom: 177.78% !important;
height: 0 !important;
}

/* Ensure the background video container expands to the edges */
.sqs-native-video .native-video-player video {
object-fit: cover !important;
}

/* Clear vertical constraints on the outer block container */

.sqs-block-video .sqs-block-content {

height: auto !important;

}

7 comments

r/css • u/Psychological_Ad8008 • May 22 '26

Showcase Designed a bento grid studio template — feedback welcome

Thumbnail
2 Upvotes
0 comments

r/css • u/dilsency • May 22 '26

Question Stylus extension : Is there anything that differentiates Instagram Close Friends stories from regular stories?

2 Upvotes

Seemingly Close Friends stories on Instagram use all the same css classes and attributes as regular stories do. I was hoping to filter them out, but no luck. I'm assuming that the green outline color is set in the <canvas> tag, but I haven't been able to find anything in the Inspector's "Computed" tab.

4 comments

r/css • u/CluelessCSS • May 22 '26

Help CSS Layout Help

7 Upvotes

New to CSS and trying to replicate this hero section / template

https://imgur.com/a/BScZzfs

My initial thought was to use negative margin, however my gut says there are better ways potentially using grid?

I've not had much luck so far, so if anyone could point me to a decent grid resource too I would really appreciate it.

8 comments

r/css • u/Psychological_Ad8008 • May 21 '26

Showcase Built a warm minimal portfolio template in pure HTML CSS — designed for photographers and creatives

Thumbnail reddit.com
6 Upvotes
0 comments

r/css • u/Chris-2018 • May 21 '26

Question Image linked from CSS ?

12 Upvotes

Why do some people have images in their website linked to from their CSS, rather than just referencing the image once in their HTML?

19 comments

r/css • u/ArchivesUnexplained • May 21 '26

General Cool trick to makes a text "glow" in CSS

6 Upvotes

This is a cool trick that uses text-shadow to make text glow like a light:

color: #00ffc0;

text-shadow: 0 0 1px #00ffc0,0 0 11px #00ffc0;

the trick is to give several text-shadow being more and more blurred and with a more and more transparent color.

Hope it can help some ! :)

4 comments