All components

Browse free, copy-paste UI components built with HTML, CSS and JavaScript.

50 component(s)

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.

Pure CSS Shapes & Dividers

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.

Pure CSS Scroll Animations

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.

Pure CSS Backgrounds

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.

Pure CSS Hover Effects

Animated Gradient Text

Pure CSS animated gradient text for headings using background-clip, with four palettes, a shine sweep variant, a CSS-only pause switch and a fallback color.

Pure CSS Text Effects

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.

Pure CSS Text Effects

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.

Pure CSS Music Players

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.

Pure CSS Weather Widgets

Back to Top Button with Scroll Progress

Round back-to-top button with an SVG ring that fills as you scroll, a percentage label and smooth scrolling, for the page or any scroll container.

Pure CSS Back to Top

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.

Pure CSS Clocks

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.

Pure CSS Maintenance Pages

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.

Pure CSS Promo Banners

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.

Pure CSS Pricing Tables

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.

Pure CSS Product Cards

Circular Progress Indicator

SVG ring progress indicators with an animated fill, count-up percentage, glow colors and a slider-driven demo ring with color thresholds.

Pure CSS Progress Bars

Pure CSS Tooltips

JavaScript-free tooltips driven by data attributes, with top, right, bottom and left placement, arrows, color tones and hover or focus triggers.

Pure CSS Tooltips & Popovers

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.

Pure CSS Modals

Social Share Buttons

Pure CSS social share card with brand-colored X, Facebook and LinkedIn buttons, a copy-link field with clipboard feedback and a native share fallback.

Pure CSS Social Buttons

Floating Action Button Speed Dial

Pure CSS floating action button that expands into a staggered speed dial of labeled actions, with vertical and horizontal variants and keyboard support.

Pure CSS Floating Action Buttons

Icon Buttons with Ripple

Round icon buttons with a Material-style ripple, toggle states and tooltips: standard, filled, tonal and outlined variants in three sizes.

Pure CSS Icon Buttons

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.

Pure CSS Button Styles

Gradient Buttons

Pure CSS gradient buttons with shifting colors on hover, a gradient outline, glow and shine effects, sizes and a disabled state.

Pure CSS Button Styles

Star Rating Input

Accessible pure CSS star rating input with half stars, built on native radio buttons, hover preview and a live value label.

Pure CSS Ratings

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.

Pure CSS Login & Sign Up