20+ Cool CSS Keyboards (Free Code + Demos)

Enjoy this collection of 100% free and open source HTML and CSS keyboard code examples. All projects are easy to add to your own website.

1. Apple Wireless Keyboard Via CSS3

CSS Keyboards - Apple Wireless Keyboard via CSS3
Apple's wireless keyboard built entirely using css3. I could use code for the background, but currently gradients have really ugly banding. Regardless, enjoy! (:
Author: Dustin Cartwright (dustinliamc)
Created on: June 23, 2012
Made with: HTML, CSS

2. CSS Grid Experiment: Keyboard Layout

CSS Keyboards - CSS Grid Experiment: Keyboard Layout
Author: Raj Suhail (irajsuhail)
Created on: May 20, 2019
Made with: HTML, CSS

3. CSS Mechanical Keyboard

CSS Keyboards - CSS Mechanical Keyboard
Mechanical Keyboard created with CSS for the January 2019 Codepen Challenge
Author: MikeEsto (Mickel07)
Created on: January 9, 2019
Made with: HTML, CSS, JS
Tags: cpc-peach, codepenchallenge

4. Awesome CSS Keyboard

CSS Keyboards - Awesome CSS Keyboard
Author: Mustafa Omar (MustafaOmarIbrahim)
Created on: January 11, 2017
Made with: HTML, CSS

5. CSS-Only Mac Keyboard

CSS Keyboards - CSS-Only Mac Keyboard
A simple Mac Keyboard using Haml and Sass, I dunno if this is the best approach but I never used Haml before and decided to try it out this time. Used the colors for the keyboard from: https://codepen.io/januff/pen/NxNLJJ
Author: Nour Saud (nourabusoud)
Created on: July 5, 2017
Made with: Haml, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: keyboard, haml, css, sass, cssonly

6. Apple Keyboard In HTML/CSS

CSS Keyboards - Apple Keyboard in HTML/CSS
Author: Carl Calderon (carlcalderon)
Created on: January 15, 2013
Made with: HTML, CSS
Tags: keyboard, apple, mac, osx, keys

7. HTML And CSS Keyboard

CSS Keyboards - HTML and CSS Keyboard
HTML and CSS Keyboard
Author: Attila Hajzer (attilahajzer)
Created on: December 27, 2013
Made with: HTML, CSS, JS
Tags: html, css, keyboard, flatui

8. CSS Keyboard

CSS Keyboards - CSS Keyboard
Representation of a keyboard made in CSS
Author: Leonardo Adrian Di Salvo (ledisalvo)
Created on: April 11, 2020
Made with: HTML, CSS
Tags: css, keyboard, box-shadow

9. CSS Mac Keyboard

CSS Keyboards - CSS Mac Keyboard
Author: Mark Boots (MarkBoots)
Made with: HTML, CSS

10. Keyboard

CSS Keyboards - Keyboard
Author: Aliyan Aslam (Aliyan-Linux)
Created on: March 23, 2020
Made with: HTML, CSS
Tags: keyboard, grid, sleek, bootstrap

11. White Minimal CSS Keyboard

CSS Keyboards - White Minimal CSS Keyboard
Author: Atul Kumar Singh (atulkumarsingh)
Made with: HTML, CSS

12. Flat Keyboard

CSS Keyboards - Flat Keyboard
Author: Aref Norouzzadeh (arefn)
Created on: May 13, 2019
Made with: HTML, CSS
Tags: keyboard, flat

13. Logitech K380

CSS Keyboards - Logitech K380
This is the keyboard I use. Recreated using CSS.
Author: Benjamin Grant (GRA0007)
Created on: April 11, 2019
Made with: HTML, CSS
Tags: keyboard, css, cool, logitech, button

14. Virtual Keyboard

CSS Keyboards - Virtual Keyboard
User Friendly Virtual Keyboard A virtual keyboard with cool themes and custom key functionalities. Keyboard for Windows Developed with HTML, CSS, and JS without any dependencies. To-do list Themes Keyboard for Macintosh Custom music for any key Custom key functions Mobile responsive...
Read More
Author: Sai Nikhil (iamsainikhil)
Created on: August 19, 2018
Made with: HTML, CSS, JS
Tags: html, css, javascript, keyboard, css-grid


Recreating my 60% keyboard in CSS
Author: Manan Tank (MananTank)
Created on: April 4, 2020
Made with: Pug, Stylus, JS
CSS Pre-processor: Stylus
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: keyboard, colors, neumorphism, grid, cssgrid

16. CSS Keyboard

CSS Keyboards - CSS Keyboard
A keyboard made with CSS, a little bit of javascript was thrown in.
Author: Christopher McCullough (chrismcullough)
Created on: August 11, 2014
Made with: HTML, Less, JS
Tags: keyboard, css, js, html

17. HTML + CSS Keyboard

CSS Keyboards - HTML + CSS Keyboard
This is a Mac keyboard made in HTML and CSS. There is some JavaScript to control the keys, but that's it.
Author: Bryan Miner (gymbry)
Created on: February 25, 2017
Made with: HTML, CSS, JS
Tags: css, html, keyboard

18. CSS Flexbox Apple Keyboard

CSS Keyboards - CSS Flexbox Apple Keyboard
If you want the details on what all the properties do, check out http://slides.com/tholex/flexbox Really wanted to push my flexbox knowledge, and thought this keyboard layout would be a good test-bed. The best part of flexbox by far has been the flex-grow stuff, e.g. try changing the spac...
Read More
Author: Olex (tholex)
Created on: August 9, 2014
Made with: HTML, Less
Tags: flexbox, typography, apple, box-shadow, inline-block