Hero Section Design
Design a stunning hero section with gradient background, flexbox centering, and entrance animation.
何时使用此配方
Perfect for landing pages, marketing sites, and portfolio homepages. A well-designed hero section captures attention immediately and sets the tone for the rest of the page.
步骤
Gradient Generator
试用此工具 →Create an immersive background gradient
Flexbox Generator
试用此工具 →Center the hero content
Animation Generator
试用此工具 →Add entrance animation
常见问题
How do I add a background image over the gradient?
Layer a background-image with the gradient using CSS multiple backgrounds: background: linear-gradient(...), url('image.jpg').
What's the ideal hero section height?
Most hero sections use min-height: 100vh for full-screen impact, or min-height: 60vh for a more compact design.
相关配方
Complete Button Style
Create a polished button with gradient background, shadow, border radius, and hover animation using MCP tools.
Card Component Style
Build a modern card component with shadow, border radius, hover transform, and smooth transitions.
Glassmorphism Effect
Create a frosted glass effect using backdrop-filter, gradient overlay, and border styling.
Responsive Grid Layout
Build a responsive CSS Grid layout with gap, auto-fit columns, and proper alignment.