32+ CSS App Design

A top collection of free 32+ HTML and CSS app design code examples. Each app is unique and stylish and great fit for your next project.

1. Amazon – Redesign

See the Pen <a href="https://codepen.io/Hyperplexed/pen/vYVLWmJ"> Amazon – Redesign</a> by Hyperplexed (<a href="https://codepen.io/Hyperplexed">@Hyperplexed</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Hyperplexed
Source: Code / Demo
Created on: APRIL 13, 2023
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

2. Glassy mobile app

See the Pen <a href="https://codepen.io/ylerjen/pen/GRvYwOY"> Glassy mobile app</a> by Yann L (<a href="https://codepen.io/ylerjen">@ylerjen</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Yann L
Source: Code / Demo
Created on: NOVEMBER 15, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Slim), CSS(SCSS)

3. Mobile UI (CSS Only)

See the Pen <a href="https://codepen.io/Charmaine_Ho/pen/LYzjKNa"> Mobile UI (CSS Only)</a> by Charmaine (<a href="https://codepen.io/Charmaine_Ho">@Charmaine_Ho</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Charmaine
Source: Code / Demo
Created on: DECEMBER 22, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

4. Analog Weather App

See the Pen <a href="https://codepen.io/birjolaxew/pen/ANyEYR"> Analog Weather App</a> by Johan Fagerbeg (<a href="https://codepen.io/birjolaxew">@birjolaxew</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Johan Fagerbeg
Source: Code / Demo
Created on: SEPTEMBER 15, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

5. Mail app design

See the Pen <a href="https://codepen.io/BeardedBear/pen/GRKZYvZ"> Mail app design</a> by BeardedBear (<a href="https://codepen.io/BeardedBear">@BeardedBear</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: BeardedBear
Source: Code / Demo
Created on: AUGUST 16, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

6. Modern UI APP

See the Pen <a href="https://codepen.io/Saul-BT/pen/YzweryY"> Modern UI APP</a> by Saul Blanco Tejero (<a href="https://codepen.io/Saul-BT">@Saul-BT</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Saul Blanco Tejero
Source: Code / Demo
Created on: JULY 5, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

7. Music APP concept

See the Pen <a href="https://codepen.io/mrspok407/pen/dXdbrO"> Music APP concept</a> by Ruslan Pivovarov (<a href="https://codepen.io/mrspok407">@mrspok407</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ruslan Pivovarov
Source: Code / Demo
Created on: JULY 17, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript(Babel)

8. Our Services

See the Pen <a href="https://codepen.io/jaymar-g-aranas/pen/XWbavVY"> Our Services</a> by Jaymar G. Aranas (<a href="https://codepen.io/jaymar-g-aranas">@jaymar-g-aranas</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jaymar G. Aranas
Source: Code / Demo
Created on: MARCH 4, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

9. Mobile Movie Theatre App Design

See the Pen <a href="https://codepen.io/ConnorGaunt/pen/WoqVqJ"> Mobile Movie Theatre App Design</a> by Connor Gaunt (<a href="https://codepen.io/ConnorGaunt">@ConnorGaunt</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Connor Gaunt
Source: Code / Demo
Created on: DECEMBER 28, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

10. Discord Portfolio

See the Pen <a href="https://codepen.io/daniellenall/pen/RwWBGgQ"> Discord Portfolio</a> by daniellenall (<a href="https://codepen.io/daniellenall">@daniellenall</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: daniellenall
Source: Code / Demo
Created on: MAY 13, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

11. Google Search – Redesign

See the Pen <a href="https://codepen.io/Hyperplexed/pen/xxJaxJj"> Google Search – Redesign</a> by Hyperplexed (<a href="https://codepen.io/Hyperplexed">@Hyperplexed</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Hyperplexed
Source: Code / Demo
Created on: JANUARY 30, 2023
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

12. Services Section | Learn CSS Garden

See the Pen <a href="https://codepen.io/ahmadnasr/pen/KKpvNGY"> Services Section | Learn CSS Garden</a> by Ahmad Nasr (<a href="https://codepen.io/ahmadnasr">@ahmadnasr</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ahmad Nasr
Source: Code / Demo
Created on: MARCH 3, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

13. CSS Exploration App Concept

See the Pen <a href="https://codepen.io/davidkpiano/pen/NGYjZv"> CSS Exploration App Concept</a> by David Khourshid (<a href="https://codepen.io/davidkpiano">@davidkpiano</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: David Khourshid
Source: Code / Demo
Created on: OCTOBER 26, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

14. UI App, Horrizontal scroll and Vertical scroll

See the Pen <a href="https://codepen.io/Delvezio/pen/povEoJP"> UI App, Horrizontal scroll and Vertical scroll</a> by Alessandro Acciardi (<a href="https://codepen.io/Delvezio">@Delvezio</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Alessandro Acciardi
Source: Code / Demo
Created on: DECEMBER 13, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

15. NFT Marketplace Mobile App Layout

See the Pen <a href="https://codepen.io/designfenix/pen/bGvJWpz"> NFT Marketplace Mobile App Layout</a> by Fernando Cohen (<a href="https://codepen.io/designfenix">@designfenix</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Fernando Cohen
Source: Code / Demo
Created on: AUGUST 24, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

16. UI Design – Event Planning App

See the Pen <a href="https://codepen.io/CodeFrogShow/pen/XayRdE"> UI Design – Event Planning App</a> by CodeFrog (<a href="https://codepen.io/CodeFrogShow">@CodeFrogShow</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: CodeFrog
Source: Code / Demo
Created on: AUGUST 29, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

17. UI Design – Travel Plan Card

See the Pen <a href="https://codepen.io/CodeFrogShow/pen/MbZNLb"> UI Design – Travel Plan Card</a> by CodeFrog (<a href="https://codepen.io/CodeFrogShow">@CodeFrogShow</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: CodeFrog
Source: Code / Demo
Created on: DECEMBER 18, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

18. Simple Weather App Design

See the Pen <a href="https://codepen.io/Call_in/pen/pMYGbZ"> Simple Weather App Design</a> by Colin Espinas (<a href="https://codepen.io/Call_in">@Call_in</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Colin Espinas
Source: Code / Demo
Created on: AUGUST 12, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS

19. App Design

See the Pen <a href="https://codepen.io/shivapandey/pen/VWPbev"> App Design</a> by Shiva Pandey (<a href="https://codepen.io/shivapandey">@shivapandey</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Shiva Pandey
Source: Code / Demo
Created on: JUNE 17, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

20. UI concept for a shop store application. [CSS]

See the Pen <a href="https://codepen.io/designfenix/pen/OJWOMzE"> UI concept for a shop store application. [CSS]</a> by Fernando Cohen (<a href="https://codepen.io/designfenix">@designfenix</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Fernando Cohen
Source: Code / Demo
Created on: APRIL 8, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

21. Neumorphic Running App

See the Pen <a href="https://codepen.io/yuhomyan/pen/BajwjRE"> Neumorphic Running App</a> by Yuhomyan (<a href="https://codepen.io/yuhomyan">@yuhomyan</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Yuhomyan
Source: Code / Demo
Created on: JUNE 29, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

22. Neumorphic Fitbit UI

See the Pen <a href="https://codepen.io/jkantner/pen/poWxOVY"> Neumorphic Fitbit UI</a> by Jon Kantner (<a href="https://codepen.io/jkantner">@jkantner</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jon Kantner
Source: Code / Demo
Created on: JANUARY 11, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

23. Mail App Design

See the Pen <a href="https://codepen.io/Call_in/pen/wvwMxwX"> Mail App Design</a> by Colin Espinas (<a href="https://codepen.io/Call_in">@Call_in</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Colin Espinas
Source: Code / Demo
Created on: AUGUST 14, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

24. Betting App – Concept

See the Pen <a href="https://codepen.io/vladracoare/pen/YzEXveV"> Betting App – Concept</a> by Vlad Racoare (<a href="https://codepen.io/vladracoare">@vladracoare</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Vlad Racoare
Source: Code / Demo
Created on: JANUARY 28, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

25. Color Drawing Web App Design

See the Pen <a href="https://codepen.io/daless14/pen/yLBBzP"> Color Drawing Web App Design</a> by Anthony DAlessio (<a href="https://codepen.io/daless14">@daless14</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Anthony DAlessio
Source: Code / Demo
Created on: FEBRUARY 19, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

26. Ticketmaster – Reskin (YT Music)

See the Pen <a href="https://codepen.io/Hyperplexed/pen/MWqjbbR"> Ticketmaster – Reskin (YT Music)</a> by Hyperplexed (<a href="https://codepen.io/Hyperplexed">@Hyperplexed</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Hyperplexed
Source: Code / Demo
Created on: FEBRUARY 25, 2023
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

27. Chat App

See the Pen <a href="https://codepen.io/fgies/pen/XJrzzp"> Chat App</a> by Friedrich (<a href="https://codepen.io/fgies">@fgies</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Friedrich
Source: Code / Demo
Created on: NOVEMBER 9, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

28. Music App

See the Pen <a href="https://codepen.io/havardob/pen/JjJXqZm"> Music App</a> by Håvard Brynjulfsen (<a href="https://codepen.io/havardob">@havardob</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Håvard Brynjulfsen
Source: Code / Demo
Created on: SEPTEMBER 2, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

29. Earmark web app | Dribbble design by Ryan Johnson

See the Pen <a href="https://codepen.io/havardob/pen/WNxOQQM"> Earmark web app | Dribbble design by Ryan Johnson</a> by Håvard Brynjulfsen (<a href="https://codepen.io/havardob">@havardob</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Håvard Brynjulfsen
Source: Code / Demo
Created on: OCTOBER 27, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

30. Fluent Design: Rebuild

See the Pen <a href="https://codepen.io/internette/pen/qogvJv"> Fluent Design: Rebuild</a> by Antoinette Janus (<a href="https://codepen.io/internette">@internette</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Antoinette Janus
Source: Code / Demo
Created on: APRIL 10, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

31. The Brightoner

See the Pen <a href="https://codepen.io/mclean_tom_/pen/DLKLbx"> The Brightoner</a> by Tom Mclean (<a href="https://codepen.io/mclean_tom_">@mclean_tom_</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Tom Mclean
Source: Code / Demo
Created on: FEBRUARY 4, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

32. Electronic Store App

See the Pen <a href="https://codepen.io/havardob/pen/bGRNYwy"> Electronic Store App</a> by Håvard Brynjulfsen (<a href="https://codepen.io/havardob">@havardob</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Håvard Brynjulfsen
Source: Code / Demo
Created on: AUGUST 25, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

33. UI to Code – Payment App

See the Pen <a href="https://codepen.io/prvnbist/pen/YQKzyv"> #6. UI to Code – Payment App</a> by Praveen Bisht (<a href="https://codepen.io/prvnbist">@prvnbist</a>) on <a href="https://codepen.io">CodePen</a>. Author: Praveen Bisht
Source: Code / Demo
Created on: JUNE 1, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)