Home / Soft and Tactile UI / Soft UI
Soft UI CSS Template, Free with Live Demo
Free soft UI dashboard template for a planner app. Calm pastel colors, gentle inner shadows and rounded panels in one HTML file. Live demo and download. The example is Loom, a weekly planner dashboard.
What is soft ui?
Soft UI is a quiet, calm style for apps people use every day. Colors are muted pastels, corners are rounded, and shadows are so light you barely notice them. Nothing shouts for attention.
It borrows a little from neumorphism, like the inset search box and progress tracks, but keeps normal white cards so it stays easy to read. That balance is why many productivity tools use it.
Good for
- Task managers and planners
- Admin dashboards people use all day
- Health and habit tracking apps
- Internal tools where calm matters more than flash
What you get in this template
- Sidebar navigation that becomes a top bar on phones
- Three stat cards with soft inset progress tracks
- Real checkboxes for the task list
- Pastel tags for task types
- Small week strip with today highlighted
The key CSS
This is the part that makes the soft ui look work. Copy it into your own project.
.panel {
background: #faf8fd;
border-radius: 24px;
box-shadow: 0 10px 30px rgba(80, 60, 130, 0.07);
}
.search {
background: #f1eef6;
border-radius: 16px;
box-shadow: inset 3px 3px 7px rgba(120,100,160,.15), inset -3px -3px 7px #fff;
}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 a soft UI design?
Soft UI uses gentle colors, rounded shapes and very light shadows to make an interface feel calm. It is popular for dashboards and productivity apps that people keep open for hours.
Is this dashboard template free for commercial use?
Yes. It is released under the MIT license, so you can use it in client work and paid products.
Does it need a framework like Bootstrap or Tailwind?
No. It is plain HTML and CSS in one file. You can add any framework later if you want to.
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
007. Skeuomorphism
Field Journal, a notes app
008. Tactile Buttons
Clack, a keyboard shop with a working calculator
009. Jelly UI
Wobble, a gelato shop