Wave Section Dividers
Pure CSS and inline SVG section dividers with wave, layered wave, curve and tilt shapes that inherit the next section's color and stretch to any width.
Tag: responsive
Components tagged with "responsive".
121 component(s)
Scroll Reveal Animations
Elements fade, slide, zoom or flip into view on scroll using IntersectionObserver and data-sr attributes, with stagger delays and reduced-motion support.
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.
Image Hover Effects
Six pure CSS image hover effects with captions: zoom, grayscale to color, sliding panel, tilt, blur and frame, also revealed by keyboard focus.
Typing Text Effect
Pure CSS typewriter effect with a blinking caret, using steps() and ch units on a monospace headline and a retro terminal window with replay.
Music Player Card
Dark music player card with a spinning vinyl cover, seek bar, play, skip, shuffle and repeat controls, volume slider and a clickable playlist.
Weather Card with Forecast
Sky-blue weather card with a CSS-drawn sun and clouds, current conditions, quick stats, a 5-day forecast with range bars and a Celsius/Fahrenheit switch.
Live Analog Clock
Live analog clock with CSS-rotated hands, conic-gradient ticks, a digital readout and optional time zone support, in pure CSS and vanilla JS.
Maintenance Page with Animated Gears
Dark full-page scheduled maintenance notice with interlocking SVG gears, a live countdown, progress bar and task checklist in pure CSS and vanilla JS.
Coupon Ticket
Ticket-style discount coupon with a striped stub, dashed perforation with notches and a copy code button with clipboard fallback and live feedback.
Pricing Cards with Hover
Three pure CSS pricing cards with hover lift and a featured plan that has a spinning conic-gradient border, glow and Most popular badge.
Product Card with Quick Actions
Responsive product card grid where hover or focus reveals wishlist, quick view and add-to-cart actions, with star ratings and a native quick view dialog.
Native dialog Modal
Accessible modal built on the native HTML dialog element with @starting-style enter and exit animation, blurred backdrop, mobile bottom sheet and an invite form.
Animated Hover Buttons
Eight pure CSS hover buttons with fill, diagonal, sliding text, border drawing, arrow, underline and press effects that also run on focus.
Login Form with Floating Labels
Clean pure CSS login card with animated floating labels, show/hide password, inline validation and a simulated sign-in state in vanilla JavaScript.
Masonry Image Gallery
Pure CSS masonry image gallery using multi-column layout, with hover and focus captions that slide up over each photo. No JavaScript needed.
Scroll-Snap Carousel
Native CSS scroll-snap carousel with arrow buttons, synced pill dots and keyboard support, enhanced by a few lines of vanilla JavaScript.
Infinite Logo Marquee
Two-row infinite logo marquee with seamless CSS loop, edge fade, pause on hover, a pause button and a static fallback for reduced motion.
Animated Number Counters
Stats section with four number cards that count up when scrolled into view, using IntersectionObserver, locale formatting and reduced-motion support.
Scroll-Snap Testimonial Slider
Horizontally scrolling testimonial cards using CSS scroll snap, with star ratings, avatars and accessible previous and next buttons.
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.
Expanding Search Bar
Search icon button that expands into a pill-shaped input, shown in a dark navbar and a large hero search, with Escape to close and a demo submit.
Styled Native Select
Pure CSS restyle of the native select element with a custom arrow, focus ring, error, success and disabled states, and three sizes.
Accordion with details and summary
No-JavaScript FAQ accordion built on native details and summary elements with smooth height animation and one-open-at-a-time behavior.