🎨

AI Prompts for CSS Help

Get layouts, animations, and responsive design

Stop fighting with CSS. These prompts help you get exactly the styles you need. Replace [bracketed text] with your specifics.

Layouts

Build a Specific Layout

Create CSS for this layout: [describe layout - e.g., "3 column grid where the middle column is twice as wide, with 20px gaps, that collapses to single column on mobile"] Use modern CSS (flexbox or grid). Include the HTML structure too.

Center Something

I need to center [a div / text / an image / a modal] inside [its parent / the viewport / a flex container]. It should be centered [horizontally / vertically / both]. Show me the simplest modern CSS solution.

Sticky/Fixed Positioning

I want [a header / sidebar / button] that [stays at top when scrolling / sticks after scrolling past it / is always in bottom right corner]. Here's my current HTML: [paste HTML structure] Write the CSS to make this work.

Responsive Design

Make This Responsive

Make this CSS responsive: [paste your CSS] Requirements: - Desktop: [describe desktop layout] - Tablet: [describe tablet layout] - Mobile: [describe mobile layout] Use mobile-first media queries.

Fluid Typography

Create fluid typography CSS that scales smoothly: - Minimum font size: [e.g., 16px] at [e.g., 320px viewport] - Maximum font size: [e.g., 24px] at [e.g., 1200px viewport] Use clamp() and explain how it works.

Pro tip: When asking for layouts, describe what you want visually, not how to build it. Let the AI pick the best approach (grid vs flexbox).

Animations

Hover Effect

Create a hover effect for [a button / card / link / image] that [scales up slightly / changes background color / has a glow effect / slides a border in]. Make it smooth and subtle, about 0.3s duration.

Loading Animation

Create a CSS-only loading animation: Style: [spinner / dots / pulse / skeleton screen] Size: [e.g., 40px] Color: [e.g., #8b5cf6] No JavaScript, just CSS keyframes.

Page Transitions

Create entrance animations for page content: Elements should [fade in / slide up / stagger in one by one] when the page loads. Use CSS animations with appropriate delays for a polished feel.

Specific Components

Style a Form

Style this form to look modern and clean: [paste form HTML] Include: - Custom input styling - Focus states - Error states (add a class) - Submit button with hover effect Color scheme: [describe colors or paste hex codes]

Card Component

Create a card component with CSS: Contents: [image, title, description, button / just text / etc.] Style: [minimal / shadowed / bordered / glassmorphism] Behavior: [hover lift effect / clickable / static] Include both HTML and CSS.