Awesome CSS Only

An awesome & curated list of beautiful projects made with pure CSS!

---

A

• A-single-div - 🎨 CSS drawings with only one HTML element.
• All-animation - A set of nice and crazy css animations made with the purpose to bring life and interactions to your project.
• Animate.css - 🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.
• Auroral - Animated background gradients with pure CSS.
• Awesome-bootstrap-checkbox - ✔️Font Awesome Bootstrap Checkboxes & Radios. Pure css way to make inputs look prettier

B

• Balloon.css - Simple tooltips made of pure CSS.
• Bonsai.css - A Utility Complete CSS Framework for less than 45kb (8kB Gzipped).

C

• 42CSSTober - 42CSSTober, a CSS illustration for each day in October, because creating only web pages is insufficient.
• CSS-Checkbox-Library - A huge library of Pure CSS Checkboxes for every taste.
• CSS-file-icons - Pure CSS icons for popular file extensions.
• CSS-Minesweeper - An ugly Minesweeper in pure HTML & CSS without JS.
• Css-modal - A modal built with pure CSS, enhanced with JavaScript.
• CSS-ripple-effect - Pure CSS (no JavaScript) implementation of Android Material design "ripple" animation
• CSS3-Slider - Pure CSS3 Slider with multiple animation options.
• Csshexagon - Pure CSS hexagon generator, built with AngularJS.
• Cssicon - Icon set made with pure css code, no dependencies, "grab and go" icons.
• Csslider - Pure CSS slider.
• Csspin - CSS Spinners and Loaders - Modular, Customizable and Single HTML Element Code for Pure CSS Loader and Spinner.
• Cssplot - Pure CSS charts.

D

• Devices.css - Pure CSS phones and tablets.
• Driveway - Pure CSS masonry layouts.

F

• Fileicon.css - The customizable pure CSS file icons.
• Flags-in-CSS - Countries flags in pure CSS.

G

• Gameboy-css 👾 Pure CSS GameBoy - Includes animations and the original sound 🔊

H

• Hits-the-mole - The Hits-the-mole game implemented in pure CSS.

I

• Icons.css - Single Element Pure CSS icons.
• Ihover - iHover is a collection of hover effects using pure CSS, inspired by codrops article, powered by Sass.
• Imagehover.css - Pure CSS Image Hover Effect Library.
• Instagram.css - Complete set of Instagram filters in pure CSS.

L

• Load-awesome - An awesome collection of — Pure CSS — Loaders and Spinners.
• Loaders.css - Delightful, performance-focused pure css loading animations.
• Loaderskit - Single Element Pure CSS Spinners & Loaders.
• Logos-in-pure-css - Company logos created in pure CSS.

P

• Pretty-checkbox - A pure CSS library to beautify checkbox and radio buttons.
• Progress.css - Create circular and horizontal progress bars with pure css adding just one attribute in your HTML tags 🖌️.
• Pure - A set of small, responsive CSS modules that you can use in every web project.
• Pure-CSS3-Animated-Border - Pure CSS3 animated border for all html element.
• Pure-drawe - Pure CSS transition effects for off-canvas views.
• Purecss-circular-progress-bar - Demos and experiments on web development ( CSS JS HTML ) - A pure css circular progress bar.
• Purecss-francine - HTML/CSS drawing in the style of an 18th-century oil painting. Hand-coded entirely in HTML & CSS.
• Purecss-gaze - HTML/CSS drawing in style of italian renaissance painting. Hand-coded entirely in HTML & CSS.
• Purecss-lace - HTML/CSS drawing inspired by Flemish baroque oil portraits. Hand-coded entirely in HTML & CSS.
• Purecss-pink - HTML/CSS drawing of gel studio lighting. Hand-coded entirely in HTML & CSS.
• Purecss-zigario - HTML/CSS drawing in the style of mid-century advertisement design. Hand-coded entirely in HTML & CSS.

R

• Radiobox.css - A complete puzzle developed exclusively in HTML & CSS 🧩.

S

• Scrollzz - A complete puzzle developed exclusively in HTML & CSS 🧩.
• Simpsons-in-css - Simpsons characters in CSS.
• Solar.css - Pure CSS Solar System Animation
• Star-Wars-Lightsaber - Pure CSS3 Star Wars Lightsaber Checkboxes.

T

• Text-spinners - Pure text, CSS only, font independent, inline loading indicators.

W

• Wenk - 😉 Lightweight pure CSS tooltip for the greater good.