A collection of popular layouts and patterns made with CSS
Star me on GitHub ● 6956★
Have you seen CSS Scan?
The fastest and easiest way to check, copy and edit CSS.
Learn more →
Following covers are made with CSS only. Inspect them!
Display
Accordion
Arrow buttons
Avatar
A
B
C
Avatar list
9+
Badge
Mon
Tue
Wed
Thu
Fri
Sat
Sun
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
Calendar
Card
Centering
Close button
Color swatch
Concave corners
Cookie banner
Corner ribbon
Curved background
Diagonal section
Docked at corner
Dot leader
Drop area
CSS is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
Drop cap
Fading long section
Feature comparison
Feature list
Fixed at corner
Fixed at side
Folder structure
Full background
PN
Initial avatar
Inverted corners
⌘ + C
Keyboard shortcut
Layered card
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
Lined paper
Media object
Overlay play button
99.99$
Price tag
Pricing table
Property list
Questions and answers
Ribbon
Separator
Stacked cards
Stamp border
9k+
stars
Statistic
Status light
Sticky table column
Sticky table headers
Teardrop
Three dimensions card
Timeline
Tree diagram
Triangle buttons
Video background
999
Voting
Draft
Watermark
Zigzag timeline
Feedback
Indeterminate progress bar
Modal
Notification
Popover arrow
Presence indicator
40%
Progress bar
75%
Radial progress bar
Resizable element
Spinner
Tooltip
Validation icon
Input
Box selector
Button with icon
CSS
Chip
Custom checkbox button
Custom radio button
Placeholder
Floating label
Input addon
S
M
L
XL
Radio button group
Monthly
Yearly
Radio switch
☆
☆
☆
☆
★
Rating
Search box
Slider
Spin button
-
+
Stepper input
Switch
Toggle password visibility
Upload button
Layout
Card layout
Holy grail
Masonry grid
Same height columns
Sidebar
Simple grid
Split screen
Sticky footer
Sticky header
Sticky sections
Navigation
A
B
C
D
Breadcrumb
1
2
3
4
5
6
Circular navigation
Dot navigation
Drawer
Dropdown
Full screen menu
Mega menu
⌘ C
⌘ V
Menu
A
B
B.1
B.2
B.3
B.3.1
B.3.2
B.3.3
B.3.4
B.4
B.5
C
D
Nested dropdowns
1
2
3
4
Pagination
Previous next buttons
Split navigation
Tab
Wizard
Follow me on
Twitter
and
GitHub
to get more useful contents.