CSS Code Examples September 5, 2018 Free CSS code examples from codepen.io and other resources. Table of Contents: Effects Essentials Input Layouts Media Navigation Other Properties Effects Animation Examples 95 items Animation Libraries 35 items Animated Backgrounds 31 items Particle Backgrounds 14 items Triangle Backgrounds 11 items Blob Effects 24 items Blur Effects 16 items Book Effects 35 items Border Animations 45 items Direction Aware Effects 11 items Fire Animation 24 items Glassmorphism 39 items Glitch Effects 18 items Glow Effects 39 items Hero Effects 26 items Hover Effects 98 items Image Effects 113 items Liquid Effects 21 items Neumorphism Examples 58 items Page Transitions 24 items Paper Effects 25 items Parallax Effects 26 items Perspective Effects 15 items Reveal Animations 14 items Ripple Effects 23 items Scroll Effects 24 items Snow Effects 17 items Text Effects 109 items Text Animations 82 items Glow Text Effects 17 items Text Shadow Effects 24 items 3D Text Effects 24 items Text Glitch Effects 20 items Typing Text Effects 11 items Water Effects 16 items Essentials 3D Examples 29 items Arrows 60 items Background Patterns 64 items Fixed Backgrounds 11 items Badges 24 items Border Examples 28 items Blockquotes 33 items Buttons 154 items 3D Buttons 29 items Animated Buttons 10 items Button Click Effects 20 items Floating Action Buttons 9 items Ghost Buttons 9 items Multi (Group) Buttons 18 items Button Hover Effects 35 items Gradient Buttons 22 items Submit Buttons 12 items Flat Buttons 31 items Close Buttons 14 items Download Buttons 14 items Social Media Icons 23 items Social Share Buttons 15 items Play/Pause Buttons 13 items Button Libraries 12 items Cards 76 items Blog Cards 21 items Card Hover Effects 22 items Flip Cards 24 items Material Design Cards 15 items Movie Cards 13 items Product Cards 22 items Profile Cards 18 items Recipe Cards 8 items Business Cards 17 items Stacked Cards 8 items Color Palettes 26 items Corners 18 items Credit Cards 10 items Cubes 22 items Dividers 12 items Hexagons 20 items Links 46 items Lists 18 items Loaders 153 items Modal Windows 67 items Notifications 15 items Panels 14 items Progress Bars 28 items Ribbons 22 items Speech Bubbles 15 items Spinners 81 items Timelines 77 items Tooltips 34 items Triangles 23 items Input Checkboxes 91 items Forms 89 items Contact Forms 14 items Login Forms 29 items Checkout Form 17 items Subscribe Forms 17 items Input Text 29 items Radio Buttons 88 items Range Sliders 21 items Search Boxes 28 items Select Boxes 31 items Star Ratings 26 items Toggle Switches 72 items Layouts Card Layouts 11 items Dashboards 15 items Flyers 11 items Magazine Layouts 69 items Masonry Layout Examples 16 items Media App Design 15 items Avatars 19 items Banners 15 items Barcodes 10 items Calculators 8 items Calendars 37 items Calendar Grids 8 items Carousels 15 items Charts and Graps 23 items Chats 12 items Clocks 44 items Countdown Timers 14 items Counters 6 items Animated Counters 8 items Flowcharts 14 items Frames 11 items Galleries 57 items Games 14 items Icons 27 items Illustrations 41 items Image Grids 15 items Infographics 19 items iPhones 20 items Keyboards 11 items Logos 33 items Music Players 13 items Posters 31 items Skeleton Loading 10 items Sliders 101 items Slideshows 28 items Tables 43 items Testimonials 12 items Thumbnails 28 items Weather Icons 17 items Weather Widgets 16 items Navigation Accordion Menus 9 items Accordions 37 items Horizontal Accordions 8 items Vertical Accordions 10 items Breadcrumbs 20 items Hamburger Menu Icons 51 items Dotted Menu Icons 11 items Headers And Footers 64 items Hotspots 26 items Menus 102 items Circle Menus 20 items Dropdown Menus 26 items Fullscreen Menu 21 items CSS Mobile Menus 18 items Sidebar Menus 16 items Horizontal Menus 16 items Off-Canvas Menu 16 items Sliding Menus 17 items Toggle Menus 15 items Pagination 32 items Tabs 15 items Tab Bars 29 items Tags 8 items Other Bubbles 10 items Clouds 12 items Coins 9 items Pixel Art 20 items Solar Systems 12 items Studio Ghibli Characters in CSS 19 items Tickets 20 items Tree View 6 items Watches 9 items Properties :nth-child() 12 items backdrop-filter 16 items background-blend-mode 11 items background-clip 15 items box-shadow 15 items clip-path 31 items custom properties (variables) 39 items filter 18 items flexbox 19 items font variable 16 items gradient 29 items grid 35 items linear-gradient 12 items mask 13 items motion path 14 items position: sticky; 9 items shape-outside 19 items text-stroke 14 items
