CSS Code Demos

Here you can find the collection of all css, HTMl and JavaScript detailed code examples from codepen.io and other resources. Examples has code snippet, download options and find the license of the code. This page covers the listed demos.

  • Effects (Animation Examples, Animation Libraries, Hover Effects, Image Effects, Page Transitions, Text Effects)
  • Essentials (Arrows, Background Patterns, Quote Styles, Cards, Color Palettes, Dividers, Link Styles, Loaders, Modal Windows, Notifications, Ribbons, Spinners, Timelines, Tooltips, CSS Buttons, Progress bar)
  • Inputs (Checkboxes, Forms, Input Text, Radio Buttons, Select Boxes, Toggle Switches)
  • Layouts
  • Media (Calendars, Carousels, Clocks, Gallery, Music Players, Sliders, Slideshows, Tables, Thumbnails)
  • Navigation (Accordions, Breadcrumbs, Hamburger Menu Icons, Headers and Footers, Hotspots, Menu Styles, Pagination, Tabs)
Apply CSS Black and White Filter to YouTube Video

CSS Black and White to YouTube Video is a simple filter in pure css that toggles a filter on t...

Weird input animation and useful for visually impaired users

Weird input animation is really awesome with fun and useful for visually impaired users too. D...

Variable font "gravity" scroll using Chee's font

Variable font experiment modifying the gravity variation axis of Chee font. Hooking the variat...

403 Forbidden Page: SVG eye illustration and CSS animation

403 Forbidden Page with SVG illustration, CSS animation and a bit of JavaScript. Demo and down...

Endless Hallway 403 Forbidden Page

Endless Hallway 403 Forbidden Page developed using CSS, HTML, Three.js and JavaScript. Demo an...

Info Pie Chart using Pure SVG and JavaScript

Info Pie chart developed using Pure SVG, JS, CSS and HTML. Pie chart show info on hover effect...

Refracted Floating Text Effect

Refracted Floating Text Effect. This pen shows how pure CSS can be used to create an animated ...

Awesome Yeti Hand Pagination

Made this fun pagination module with a helpful yeti hand. Created with HTML, JS + GreenSock. D...

Mouse Jail 403 Forbidden design

Cool Mouse Jail 403 Forbidden design using CSS, HTML and JavaScript. Demo and download availab...

Google-style Loading Animation using css keyframers

This is a Loading Animation Concept on Google Style inspired by those cool animations made for...

Hover effect for 403 forbidden page using only css

403 forbidden CSS hover effect developed using CSS and HTML. Demo and download available.

SVG Text effects using feTurbulence feColorMatrix and feComponent Transfer

SVG Text effects usinf filter Turbulence, ColorMatrix and Component Transfer using HTML, SVG a...

Awesome text rotation animation using CSS

CSS is Awesome. this demo covers text rotation animation using only css. Demo and download ava...

Simple Music Player

Simple Music Player developed using HTML, CSS and JavaScript. Music player has the options to ...

Angled Youtube Embed with animation effect when hover

Angled Youtube Embed with animation effect when hover developed using css, html and javascript...

403 Forbidden Airport Security design

403 Forbidden Airport Security design demo and download available. Developed using css, html a...

Basic Vanilla JS Carousel

Basic Vanilla JS Carousel developed using css, html and vanillaJS

403 Error - CSS simple illustration page

Contributing to the challenge of server errors. This week: 403 - FORBIDDEN. This was fun! And ...