Questions tagged [css]
Post a PromptPrompts focused on styling and visual design.
29 prompts
8votes
1answers
2.0kviews
Gemini prompt for an animated gradient hero background that doesn't jank on scroll
I wanted a slow, living gradient behind a hero, the kind that feels expensive. My first attempts animated background-position on a huge gradient and it hitched badly on scroll and cooked laptop fans,
9votes
1answers
2.0kviews
Generative CSS gradient-mesh background that stays subtle behind text
For a poster-style hero I wanted a soft animated gradient mesh, but the usual prompt gives you a seizure-inducing rainbow that makes overlaid text unreadable. The animation also pinned the CPU because
10votes
1answers
1.9kviews
Prompt for a dark-mode pricing table that reads as premium, not a spreadsheet
I build a lot of dark-mode products and pricing tables are where AI output falls apart. The default is three equal cards, a wall of checkmarks, and one card with a garish "Most Popular" badge slapped
6votes
0answers
928views
Container-query-driven component that reflows by its own width, not the viewport
I'm building a media object (avatar + text + actions) that lives in a sidebar, a wide feed, and a narrow modal. Media queries were useless because the component's width has nothing to do with the view
15votes
2answers
1.7kviews
Prompt for a PWA that works offline first try, without a service worker that caches stale forever
I build mobile web that should feel native, and the classic failure is a service worker that caches so aggressively users get a stale app for days and can't figure out why the update never lands. My p
9votes
1answers
1.7kviews
Prompt for a feature section that isn't just a 3-column grid of icon + heading + text
The feature section is where landing pages go to be boring. Every model defaults to the same three-up card grid with a generic icon, a two-word heading, and a sentence of filler. It's instantly forget
21votes
2answers
3.6kviews
CSS-only accordion that animates open using grid-template-rows 0fr to 1fr
The eternal problem: you can't transition height: auto, so every accordion prompt gives me either a JS height-measuring hack or a max-height guess that's either clipped or has a laggy delay when conte
9votes
1answers
1.6kviews
Fluid type scale with clamp() that stays readable and doesn't overshoot on 4K
Editorial layouts live and die by the type scale. My first prompts gave me clamp() values that looked fine on a laptop but ballooned to absurd sizes on a 32-inch monitor because the preferred vw term
12votes
1answers
1.6kviews
Risograph-style generative poster grid that looks printed, not rendered
I wanted that two-color risograph print feel: slightly misregistered layers, grainy ink, limited palette. Straight prompts gave me clean flat vector art that screamed 'computer', not 'printed on a Ris
13votes
0answers
1.3kviews
Chart theming as design tokens so every chart in the app matches
We had six charts built by four people and they all looked slightly different: different grays for gridlines, different fonts, three shades of the same 'brand blue'. I wanted the model to generate a s
6votes
0answers
665views
SVG line-draw animation for an icon that self-draws once, then holds
I wanted a checkmark that draws itself in on success, the classic stroke-dasharray trick, but every generated version either looped forever, drew at a constant robotic speed, or flashed the fully-draw
6votes
0answers
973views
Getting a responsive landing layout with real grid instead of 20 stacked flexbox divs
Most models scaffold a landing page as an endless tower of <div class="flex flex-col" wrappers. It works but it's impossible to maintain and the vertical rhythm is always slightly off between sections
26votes
2answers
2.9kviews
How I prompt for an accessible signup + first-run flow that passes an audit by default
We failed an accessibility audit on our signup once: unlabeled inputs, an error summary that never got announced, focus that jumped to the top of the page after validation. Retrofitting a11y is misera
9votes
0answers
1.2kviews
GitHub-style contribution calendar heatmap as pure SVG, no library
I wanted the little year-of-squares heatmap for an activity page, but the versions I got either misaligned the weekday rows or started the week on the wrong day, so the whole grid was shifted by one a