Ready-to-Use
HTML, CSS & JavaScript
Components
Browse reusable UI components, effects and interactions. Preview the result, customize the code and copy what you need.
Explore the Library
Browse 114+ ready-to-use HTML, CSS & JavaScript components. Filter by category, preview each component, and copy the code for your projects.
Liquid Glass Focus Mode Buttons
A sleek set of liquid glass focus buttons with colorful hover fills, soft glow effects and…
Animated S-Wave Login & Sign Up Form
A modern animated authentication form with a glowing SVG S-wave panel, smooth 180-degree transition, login and…
Floating Neon Navigation Bar
A futuristic floating navigation bar with a glowing active orb, smooth indicator movement, interactive icons and…
Neon Energy Progress Loader
A futuristic animated progress loader with neon energy effects, live percentage tracking, glowing motion and a…
3D Hover Monster Cards
Interactive fantasy cards that tilt toward the floor on hover while unique monster characters rise above…
Interactive Travel Destination Slider
A cinematic travel destination slider with animated hero image switching, interactive destination cards, navigation arrows and…
Interactive Lamp Login Reveal Form
A futuristic lamp-controlled login form with glowing light effects, glassmorphism styling and smooth JavaScript reveal interaction.
Interactive Matcha Product Switcher Card
A premium interactive product card with four matcha variations, smooth image switching, dynamic delivery date and…
3D Smartwatch Fitness Dashboard Reveal Card
An interactive smartwatch fitness card with a glowing dial, animated health stats, product pop-out and smooth…
3D Headphone Audio Reveal Card
An interactive neon audio card with a morphing logo, animated equalizer, headphone pop-out and smooth 3D…
Interactive Sneaker Product Reveal Card
A futuristic product card that expands from a circular brand logo into a premium sneaker showcase…
Radial Social Media Menu
A modern radial social menu with smooth staggered animations, glass-style buttons and a cyan-purple CodeRipple hover…
3D Fantasy Book Cover Pop-Out Cards
Interactive fantasy book cards with a smooth 3D hover effect that brings the character out of…
Interactive Schedule Calendar App
A responsive schedule calendar with month navigation, daily tasks, notes, search and an interactive add schedule…
Interactive Tech Orbit with Light Switch
A glowing interactive technology orbit with 3D glass cards, smooth orbital movement and a pull-cord light…
Animated Fly-In Navigation Menu
A smooth animated navigation menu with staggered fly-in items, CodeRipple menu links and responsive interaction.
Circular Gradient Login Form
A circular dark login form with gradient accents, password visibility control, social login buttons and responsive…
Neumorphic Pill Navigation
A smooth pill-style navigation menu with a raised active tab, subtle neumorphic hover effects and responsive…
Expandable Sidebar Navigation
A clean responsive sidebar navigation with smooth collapse and expand behavior, grouped menu sections, active states…
Gradient Cursor Trail
A colorful cursor trail effect that creates soft gradient particles as the pointer moves across the…
Cursor Ring Hover Effect
A custom cursor ring that follows the pointer and expands when hovering over interactive elements inside…
Click Ripple Cursor
A click ripple effect that creates an expanding animated circle exactly where the user clicks inside…
Cursor Spotlight Effect
A smooth spotlight that follows the mouse pointer and creates an interactive glow across a dark…
Image Reveal Cursor
An interactive cursor effect that reveals a different project image on hover and follows the mouse…
Text Hover Cursor
A custom cursor label that follows the mouse and changes its text when hovering over interactive…
Blob Cursor
A soft animated blob that follows the mouse pointer and creates a fluid interactive cursor effect…
Cursor Follower Dot
A small animated dot that smoothly follows the mouse pointer inside the preview area for a…
Magnetic Cursor
A magnetic hover interaction where the button gently moves toward the cursor for a smooth and…
Glow Cursor
A soft glowing cursor effect that follows mouse movement and adds a modern interactive highlight inside…
Cursor Trail Effect
A smooth cursor trail effect that creates glowing dots behind the pointer for a modern interactive…
Custom Circle Cursor
A smooth custom circle cursor that follows mouse movement and creates a modern interactive feel for…
Contact Form
A clean modern contact form with name, email, and message fields, designed for dark websites and…
File Upload Input
A modern file upload input with a clean dark design, custom upload button, and selected file…
Toggle Switch
A modern toggle switch with a smooth sliding animation, clear active state, and dark UI styling…
Custom Radio Buttons
Modern custom radio buttons with a clean dark design, smooth selection animation, and a glowing active…
Custom Checkbox
A clean custom checkbox with a modern dark style, smooth animation, and a clear checked state…
Custom Select Dropdown
A fully custom dropdown with a clean dark design, smooth opening animation, and selectable options without…
Textarea with Character Counter
A clean textarea with a live character counter that updates as the user types, useful for…
Animated Border Input
A modern input field with a smooth animated gradient border that becomes active when the user…
Search Input with Icon
A clean search field with a built-in search icon and smooth focus effect, designed for modern…
Password Show Hide Input
A modern password field with a show and hide button so users can quickly check the…
Glow Focus Input
A modern dark input field with a smooth cyan glow that appears when the user clicks…
Floating Label Input
A clean floating label input that moves the label above the field when the input is…
Noise Gradient Background
A textured gradient background that combines soft color blending with subtle visual noise for a modern…
Mesh Gradient Background
A smooth mesh-style gradient background with blended color zones that create a modern layered look using…
Geometric Pattern Background
A modern geometric background made with layered CSS shapes and gradients, ideal for hero sections, cards,…
Spotlight Background
A modern dark background with a soft spotlight glow that creates a clear focal point for…
Gradient Wave Background
A layered animated wave background with smooth gradient colors, built with pure CSS for modern hero…
Floating Blobs Background
A soft animated background with floating blurred color blobs that add depth, movement, and a modern…
Radial Glow Background
A modern dark background with layered radial glows that add soft color, depth, and focus without…
Moving Stripes Background
A smooth diagonal stripe background with continuous motion, created with pure CSS for modern sections, banners,…
Dot Pattern Background
A clean dotted background pattern built with pure CSS, ideal for modern landing sections, dashboards, and…
Animated Grid Background
A clean moving grid background with subtle depth and motion, built with pure CSS for modern…
Aurora Background
A soft animated aurora-style background with glowing color layers that create a smooth modern atmosphere using…
Animated Gradient Background
A smooth animated gradient background that adds depth and movement to modern websites without requiring images…
Dropdown Navbar
A clean navigation bar with a dropdown menu for grouped links. It uses HTML, CSS, and…
Hamburger Menu Navbar
A responsive navigation bar with a hamburger menu that opens and closes the navigation links on…
Sticky Navbar
A clean sticky navigation bar that stays visible at the top while the page scrolls. It…
Active Link Navbar
A clean navigation menu with a highlighted active link and smooth hover effects. It uses simple…
Minimal Icon Navbar
A compact navigation bar that combines simple icons with clean text labels. It uses HTML and…
Centered Logo Navbar
A balanced navigation layout with menu links on both sides of a centered logo. It uses…
Glow Hover Navbar
A modern navigation menu with a soft neon glow effect on hover. It uses simple HTML…
Gradient Border Navbar
A modern navigation bar with a glowing gradient border and smooth hover effects. It uses simple…
Glassmorphism Navbar
A sleek glass-style navigation bar with blur, transparency, and soft borders. It uses simple HTML and…
Sliding Highlight Navbar
A modern navigation menu with a smooth sliding highlight effect on hover. It uses simple HTML…
Pill Hover Navbar
A modern navigation menu with smooth pill-shaped hover backgrounds. It uses simple HTML and CSS and…
Animated Underline Navbar
A clean navigation menu with a smooth animated underline on hover. It uses simple HTML and…
Progress Bar Loader
A smooth animated progress bar with a glowing gradient effect. It uses pure HTML and CSS…
Hourglass Loader
A clean rotating hourglass-style loader built with pure HTML and CSS. It works well for loading…
Chasing Dots Loader
A circular loader with glowing dots that chase each other around the center. It uses pure…
Gradient Spinner Loader
A colorful circular spinner with a smooth cyan-to-purple gradient. It uses pure HTML and CSS with…
Square Flip Loader
A compact loader with a square that flips smoothly between two sides. It uses pure HTML…
Dual Ring Loader
A modern loader with two rotating rings moving in opposite directions. It uses pure HTML and…
Orbit Loader
A clean circular loader with a small dot orbiting around the center. It uses only HTML…
Bars Loader
A simple animated loader made with vertical bars that rise and fall in sequence. It uses…
Ripple Loader
A smooth ripple loader made with expanding circular rings. It uses pure HTML and CSS with…
Bouncing Dots Loader
A playful three-dot loader with a smooth bouncing animation. It uses only HTML and CSS, so…
Spinning Ring Loader
A smooth circular loader with a rotating cyan ring. It uses pure HTML and CSS, making…
Pulse Loader
A clean animated loader with three pulsing dots. It works with pure HTML and CSS, so…
3D Shadow Text Effect
A bold layered text effect that creates a clean 3D depth using multiple shadows. Copy the…
Letter Spacing Hover Effect
A smooth hover text effect that expands the spacing between letters and adds a subtle cyan…
Blur Reveal Text Effect
A smooth blur reveal text animation that transitions from soft and hidden to sharp and clear.…
Outline Text Hover Effect
A clean outline text hover effect that fills the letters with color when the user moves…
Split Text Hover Effect
A creative split text hover effect where the top and bottom halves move apart to reveal…
Shimmer Text Effect
A smooth shimmer text effect with a bright light sweep moving across the letters. Copy the…
Wave Text Effect
A smooth wave animation that moves each letter up and down with a staggered motion. Copy…
Text Reveal Effect
A smooth text reveal animation that slides content into view with a clean masked effect. Copy…
Glitch Text Effect
A sharp digital glitch text effect with layered color shifts and quick distortion movement. Copy the…
Typing Text Effect
A clean typing animation with a blinking cursor effect for headings, hero sections, and creative text…
Neon Glow Text Effect
A bright neon-style text effect with layered glow and a subtle pulse. Copy the HTML and…
Gradient Text Effect
A clean animated gradient text effect that adds colorful movement to headings and titles. Copy the…
Interactive CTA Card
A modern call-to-action card with an icon, short message and animated button. Copy the HTML and…
Team Member Card
A clean team profile card with avatar, role, short bio and social links. Copy the HTML…
Notification Card
A clean notification card with an icon, message, timestamp and unread indicator. Copy the HTML and…
Stats Card
A modern statistics card with a main value, growth indicator and progress bar. Copy the HTML…
Feature Card
A clean feature card with a gradient icon, supporting text and a simple action link. Copy…
Blog Article Card
A modern blog article card with thumbnail area, category label, article details and a read-more link.…
Testimonial Card
A clean testimonial card with customer feedback, star rating and profile details. Copy the HTML and…
Product Card
A modern product card with image area, rating, price and a clear add-to-cart action. Copy the…
Pricing Card
A modern pricing card with plan details, feature list and a clear call-to-action button. Copy the…
Glassmorphism Card
A modern glass-style card with translucent layers, soft blur and subtle glow effects. Copy the HTML…
Hover Lift Card
A modern content card with a smooth lift effect, soft glow and subtle border highlight on…
Profile Card
A clean modern profile card with an avatar, user details, social stats and action buttons. Copy…
Social CTA Gradient Button
A bold gradient call-to-action button with a smooth shine effect and animated arrow on hover. Copy…
Loading Button
An interactive loading button that shows a spinner while processing and displays a success state when…
Magnetic Hover Button
An interactive button that subtly follows the cursor while hovering and smoothly returns to its original…
Icon Arrow Button
A clean call-to-action button with an animated arrow that moves on hover. Copy the code and…
Sliding Background Button
A modern button with a smooth background layer that slides across on hover. Copy the code…
Ripple Click Button
An interactive button that creates a smooth ripple effect exactly where you click. Copy the HTML,…
Shine Shimmer Button
A stylish button with a smooth light sweep animation that creates a clean shimmer effect on…
Animated Border Button
A modern button with a colorful animated border and smooth hover effect. Copy the code and…
3D Press Button
A tactile 3D-style button with a realistic pressed effect. Copy the code and use it in…
Glassmorphism Button
A modern glass-style button with a translucent background, soft border and smooth hover effect. Copy the…
Neon Glow Button
A clean neon-style button with a glowing border and smooth hover effect. Copy the code and…
Liquid Gradient Button
A smooth neon-style gradient button with a glowing hover effect. Copy the code and use it…