Home / Soft and Tactile UI / Skeuomorphism
Skeuomorphism CSS Template, Free with Live Demo
Free skeuomorphism design template for a notes app. Leather cover, stitching, lined paper and a brass switch, all in pure CSS. Live demo and download. The example is Field Journal, a notes app.
What is skeuomorphism?
Skeuomorphism makes screens look like real objects. Early iPhone apps used it everywhere: notes on yellow paper, calendars in leather, bookshelves made of wood. After years of flat design, it is coming back, because people miss interfaces with a bit of character.
This template draws every texture with CSS gradients. The wood grain, the leather, the dashed stitching, the lined paper and the red margin line are all code. There is not a single image file.
Good for
- Notes, journal and diary apps
- Recipe and hobby websites
- Music apps with knobs and dials
- Portfolio pages that want a crafted feel
What you get in this template
- Wood desk background made with repeating gradients
- Leather cover with stitched border
- Lined notebook paper with a margin line
- Brass toggle switch that slides
- Handwritten Caveat font and a sticky note
The key CSS
This is the part that makes the skeuomorphism look work. Copy it into your own project.
.page {
background:
linear-gradient(90deg, transparent 60px, #e39a9a 60px 62px, transparent 62px),
repeating-linear-gradient(transparent 0 31px, #b8cfe0 31px 32px),
#fbf4e2;
}
.cover::before {
content: ""; position: absolute; inset: 12px;
border: 2px dashed rgba(243, 220, 180, 0.55); border-radius: 8px;
}How to use it
- Click Download HTML file above.
- Open the file in any code editor, like VS Code.
- Change the text, colors and links to match your project. Colors are at the top of the style tag.
- Upload it to any host, such as GitHub Pages, Netlify or your own server. It is one file with no build step.
Questions people ask
What is skeuomorphic design?
It is a design style that copies the look of real world objects, like paper, leather, wood or metal, so people instantly understand how to use an interface.
Is skeuomorphism coming back?
Yes. After a decade of flat design, many designers are adding texture and depth again, often in a lighter way than the old iPhone apps.
Can I make lined paper with CSS?
Yes. A repeating-linear-gradient draws the blue lines and a normal linear-gradient adds the red margin. You can copy the exact code from this page.
More Soft and Tactile UI designs
001. Glassmorphism
Harbor, a savings app landing page
002. Liquid Glass
Tidewell, a weather app screen
003. Neumorphism
Hearth, a smart home control panel
004. Claymorphism
Pebble Math, a kids learning app
005. Frosted Aurora
Stillwater, a sleep and calm app
006. Soft UI
Loom, a weekly planner dashboard
008. Tactile Buttons
Clack, a keyboard shop with a working calculator
009. Jelly UI
Wobble, a gelato shop