Advanced Styling Techniques

---

Gradient Techniques

Linear Gradients

Linear gradients flow in a straight direction — horizontal, vertical, or diagonal.

Create a hero section with a linear gradient background:
from purple-600 (#9333EA) to blue-600 (#2563EB), flowing left to right.
CSS: background: linear-gradient(to right, #9333EA, #2563EB)

Popular linear gradient directions:

Scroll horizontally→

Direction	CSS value	Visual effect
Left to right	to right	Horizontal flow
Top to bottom	to bottom	Vertical fade
Diagonal	135deg	Dynamic diagonal
Custom angle	45deg	Artistic tilt

This table scrolls horizontally. Keyboard users can focus the table and use the left and right arrow keys.

Use a multi-stop linear gradient for a sunset effect:
CSS: background: linear-gradient(135deg, #F97316 0%, #EC4899 50%, #8B5CF6 100%)
Apply to the page hero background at full width.

---

Radial Gradients

Radial gradients radiate from a center point outward.

Create a radial gradient card background for a premium section:
CSS: background: radial-gradient(circle at top left, #8B5CF6 0%, #111827 70%)
Makes the top-left corner glow purple while fading to dark.

Radial gradient use cases:

Radial spotlight effect on a dark background:
CSS: background: radial-gradient(ellipse at 50% 0%, rgba(59, 130, 246, 0.3) 0%, transparent 70%)
Creates a subtle blue glow from the top center — good for hero sections.

---

Gradient Text

Apply a gradient to heading text:
CSS:
  background: linear-gradient(135deg, #6366F1, #EC4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
Use on the main headline of the hero section only.

---

Animation & Micro-interactions

Micro-interactions are small, purposeful animations that confirm user actions and make an interface feel alive. They should be subtle — never distracting.

Hover Effects

Add hover micro-interactions to product cards:
- Scale: transform: scale(1.03) on hover
- Shadow: transition from medium to large shadow
- Transition: all properties over 200ms ease-in-out
- Cursor: pointer
Do not animate layout-affecting properties (width, height, padding).

---

Button State Transitions

Design button state transitions:
Default: blue-600 (#2563EB) background, white text
Hover: blue-700 (#1D4ED8), transform: translateY(-1px), larger shadow
Active/pressed: blue-800 (#1E40AF), transform: translateY(0), inner shadow
Disabled: gray-300 background, gray-500 text, no pointer events
All transitions: 150ms ease

---

Loading States

Create a skeleton loading state for a blog post card:
- Placeholder blocks for image (aspect ratio 16:9), title (2 lines), and excerpt (3 lines)
- Background: gray-200 (#E5E7EB)
- Animation: shimmer effect from left to right over 1.5s infinite
- CSS: background-size: 400% 100%, animated via keyframes

---

Focus Animations

Add animated focus rings to all form inputs:
Default: 1px solid #D1D5DB border
Focus: 2px solid #3B82F6 border with box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25)
Transition: border-color and box-shadow over 150ms ease

---

CSS Custom Properties (Variables)

CSS custom properties make designs maintainable and enable easy theme switching. Always prompt for variables when building multi-theme interfaces.

Base Variable System

Implement a CSS custom property design system:

:root {
  --color-primary: #3B82F6;
  --color-primary-hover: #2563EB;
  --color-secondary: #6B7280;
  --color-background: #FFFFFF;
  --color-surface: #F9FAFB;
  --color-text: #111827;
  --color-text-secondary: #6B7280;
  --color-border: #E5E7EB;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}

---

Dark Mode Override

Add dark mode support using data-theme attribute:

[data-theme="dark"] {
  --color-background: #111827;
  --color-surface: #1F2937;
  --color-text: #F9FAFB;
  --color-text-secondary: #9CA3AF;
  --color-border: #374151;
}

Toggle with JavaScript: document.documentElement.setAttribute('data-theme', 'dark')

---

Spacing Scale

Add a consistent spacing scale to the design system:

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
}

Use these variables in all component padding and margin values.

---

Pre-built Color Palettes

When building a cohesive interface quickly, name a palette type and let AI apply it consistently across all components.

Modern

Professional and clean — for SaaS and corporate tools.

Use the modern palette:
Primary: #3B82F6 (blue), Secondary: #1F2937 (dark gray),
Accent: #2563EB, Neutral: #F3F4F6, Text: #111827
Clean and professional, minimal decoration.

Vibrant

Energetic and bold — for creative and youthful brands.

Use the vibrant palette:
Purple (#8B5CF6), Pink (#EC4899), Yellow (#F59E0B), Green (#10B981)
High saturation, bold contrasts, use gradients between adjacent colors.

Earth

Warm and natural — for food, wellness, and sustainability brands.

Use the earth palette:
Amber (#D97706), Orange (#F97316), Green (#10B981), Stone (#78716C)
Warm and organic, avoid cool blues, use warm white (#FEFCE8) for backgrounds.

Monochrome

Sophisticated and editorial — for content platforms and portfolios.

Use the monochrome palette:
gray-900 (#111827), gray-700 (#374151), gray-500 (#6B7280),
gray-300 (#D1D5DB), white (#FFFFFF)
No color accents — use font weight and size for hierarchy.

Ocean

Trustworthy and calm — for finance, data, and analytics.

Use the ocean palette:
blue-900 (#1E3A5F), blue-700 (#1D4ED8), cyan-500 (#06B6D4), teal-400 (#2DD4BF)
Deep and authoritative, light cyan accents for data highlights.

Sunset

Dynamic and expressive — for gaming, entertainment, and social.

Use the sunset palette:
Orange (#F97316), Red (#EF4444), Pink (#EC4899), Purple (#8B5CF6), Yellow (#F59E0B)
Warm gradient backgrounds, high contrast on dark surfaces.

---

💡 Advanced Prompt Tips

Combine gradient + variable — Reference your CSS variable inside a gradient for maintainable code:

Hero gradient using design tokens:
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%)

Layer shadows and gradients — For glassmorphism with depth:

Glass card with layered effects:
background: rgba(255, 255, 255, 0.1),
backdrop-filter: blur(12px),
border: 1px solid rgba(255, 255, 255, 0.2),
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3)