A hands-on showcase of the most popular HTML/CSS design techniques used in web development from 2024 onwards. Scroll down to explore each one.
Pure CSS carousel using scroll-snap-type: x mandatory. Navigate with the arrow buttons, swipe on mobile, or let auto-play cycle through the slides.
Animated border-radius keyframes create organic blob shapes that continuously morph. No SVG needed — pure CSS.
Hover triggers a 3D tilt using perspective and rotateX/Y. Circular icon shapes break the rectangular pattern.
Set on the parent container to create a 3D space for child transforms.
Tilt the card along axes to create that satisfying depth effect on hover.
Keeps child elements in the same 3D space so icons "pop out" toward you.
The background image fills the entire viewport via background-attachment: fixed. Glass-effect panels scroll over it. A subtle grid pattern overlay adds texture.
The section uses background: url(...) center / cover no-repeat fixed. The fixed attachment locks the image to the viewport so it never moves while you scroll through the content.
A ::before pseudo-element layers a repeating CSS grid texture and a dark gradient over the image. This adds depth and ensures text remains readable against any photo.
Each card uses backdrop-filter: blur(24px) with a semi-transparent background. As you scroll, the blurred image shifts behind each panel — creating a living, dynamic feel.
Apple, Stripe, and Linear all use this for hero sections and storytelling. The full-bleed image creates immersion while scrolling text provides narrative context. Zero JavaScript needed.
Asymmetric grid popularized by Apple. Cards of different sizes create visual hierarchy. Uses grid-column: span and grid-row: span for flexible layouts.
This spans 2 columns and 2 rows using grid-column: span 2; grid-row: span 2. It becomes the focal point of the grid.
Standard 1x1 card with minimal content.
Dark variant for contrast and emphasis.
Wide card spanning 2 columns. Use for content that needs horizontal space like charts or timelines.
Cards auto-fill the grid gaps.
Uses backdrop-filter: blur(20px) with semi-transparent backgrounds to create a frosted-glass look. The colorful blobs behind the cards show through.
The key property. Applies blur, brightness, or saturation to whatever is behind the element.
Use rgba(255,255,255, 0.08) backgrounds so the blur effect is visible through the card.
A thin semi-transparent border like 1px solid rgba(255,255,255,0.12) adds definition.
Circles, pills, and orbs float endlessly using @keyframes with varying durations and delays. Hover any element to make it pop.
Vertical scrolling gets translated into horizontal card movement. The section uses a tall container with a position: sticky inner, and JavaScript translates scroll position to translateX.
Tall outer container (400vh) creates scroll distance
Sticky inner stays visible during scroll
JavaScript maps scrollY to translateX
Cards glide horizontally as you scroll down
Widely used on modern portfolio and product sites
CSS clip-path and creative border-radius turn images into circles, hexagons, arches, diamonds, and organic shapes.
circle()
polygon() hexagon
border-radius arch
polygon() diamond
border-radius: 30%
ellipse()
polygon() pentagon
circle()
Elements orbit a central point using transform: rotate() translateX() rotate() to keep icons upright while revolving. Pure CSS, infinite motion.
Pill-shaped buttons with continuous pulse rings expanding outward. Uses ::before and ::after pseudo-elements with staggered animation delays.
Each line slides up and fades in with a staggered delay. Uses transition-delay on nth-child selectors and Intersection Observer to trigger the .visible class.
Elements start invisible and translate upward as they enter the viewport. Uses the IntersectionObserver API to add a .visible class, which triggers CSS transitions.
The modern way to detect when elements enter the viewport. Much better than scroll event listeners.
The animation itself is pure CSS — opacity and transform. JS just toggles the class.
Only opacity and transform are animated — both are GPU-accelerated for silky 60fps motion.
Add increasing transition-delay to each child for a cascading entrance effect.
Controls how much of the element must be visible before triggering. Use 0.15 for early reveal.
Unobserve after first trigger so the animation only plays once and doesn't reverse on scroll-up.
Pure CSS infinite scroll using translateX(-50%) animation on a duplicated track. Outlined text uses -webkit-text-stroke.
Uses the <details> and <summary> HTML elements. Zero JavaScript. The browser handles open/close state natively. Style the marker and transitions with CSS.
scroll-snap-type: x mandatory) and on each child (scroll-snap-align: start). The browser automatically snaps to each element when the user finishes scrolling. No JavaScript needed.position: sticky acts like relative until it reaches a scroll threshold (defined by top, bottom, etc.), then it acts like fixed — but only within its parent container. When the parent scrolls out of view, the sticky element goes with it.backdrop-filter: blur(20px) for a frosted glass effect. The element needs a semi-transparent background for the effect to show through.--angle for rotating gradients. Without @property, CSS can't interpolate between custom property values during animations.A conic-gradient background rotates using @property to animate the angle. A dark inner card with 2px less border-radius creates the glowing border illusion.
Creates a gradient that sweeps around a center point — perfect for rotating border effects.
Registers --angle as an animatable <angle> type, enabling smooth rotation via CSS keyframes.
The colored border is actually the parent's background. The inner card covers all but 2px of padding, revealing the glow.
Image cards with overlay text that transitions on hover. The image scales up, the gradient overlay changes color, and the description slides in with a delay — all pure CSS transitions.
Full-width rows pair a large photograph with a bold colored panel containing text and a call-to-action. The sides alternate per row, creating a magazine-style editorial layout with floating geometric shapes as decoration.
Billions of stars stretching across the cosmos, captured in vivid detail. This layout pairs bold imagery with solid color panels.
Where earth meets sky in perfect stillness. Alternating sides create a visual zig-zag rhythm that guides the eye down the page.
Earth as seen from the International Space Station. Floating white squares and circles add subtle texture to each color panel.
A transparent-background PNG floats slowly over a pure CSS space scene — twinkling stars, drifting nebulae, and orbiting planets. Zero images for the background, only CSS.