Animated Gradient Background
Pure CSS hero section with a slowly shifting multi-color gradient, drifting blurred blobs and a grain overlay, customizable through CSS variables.
Tag: hero
Components tagged with "hero".
9 component(s)
Hero with Rotating Words
Dark hero section whose headline cycles through words with a slide-and-fade animation, a pause button and decorative stat cards.
Mobile App Landing Page
Bootstrap 5 mobile app landing page with a CSS phone mockup, floating notification cards, store buttons, feature grid, steps and a gradient call to action.
Carousel with Captions
Bootstrap 5 hero carousel with glass captions, pill indicators, previous and next buttons, a pause control and gradient SVG slides.
Hero with Background Overlay
Full-width Bootstrap 5 hero section with a cover background image, dark gradient overlay, fluid headline, two call-to-action buttons and a stats row.
Centered Hero with Announcement Badge
Dark Tailwind CSS hero section with an announcement pill, gradient headline, two CTA buttons, glowing grid background and a row of trust logos.
Hero with Signup Form
Bootstrap 5 two-column hero with value points, social proof and a validated signup card that shows a loading state and a success message.
Transparent Navbar that Turns Solid on Scroll
Bootstrap 5 navbar that sits transparently over a gradient hero and becomes a solid, blurred bar with a shadow when the page scrolls.
Split Hero with App Screenshot
Dark Tailwind CSS split hero with gradient headline, two CTA buttons and an animated mock app dashboard built entirely from divs.