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:

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

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)