CSS Vars gives you a utility-first foundation, a set of ready-made components built on top of it, and a semantic token layer — surface, panel, control, and input variables — that sits above the raw palette. Change a token, and every card, button, and form field that references it updates with it. No build step, no config files, just one stylesheet.
Simplicity
One CSS file. No dependencies, no tooling, no installs.
No Build Tools
No compiling, no bundling
No webpack, no Vite, no PostCSS pipeline, no watch tasks — nothing to configure or run before you can use the framework.
Zero Dependencies
Nothing else to install
No npm packages, no external libraries, no version conflicts to manage — the stylesheet stands entirely on its own.
Pure HTML & CSS
Every common UI element, no JS required
Menus, tabs, accordions, dropdowns, and modals all run on checkbox and radio toggles, so there's less to load and less to break.
Consistency
One design language. Change a token, and every component and utility using it updates.
Design Tokens, Not Guesswork
One set of variables runs the whole UI
Surface, panel, control, and input tokens sit above the color palette. Change one variable and every card, button, and field that references it follows.
Utility-First Core
Every property is a composable class
Spacing, color, shadow, and layout are all single-purpose classes you combine directly in markup — no custom CSS to write or maintain.
Component-Ready
Cards, panels, dropdowns & menus, built in
Common patterns, cards, panels, sidebars, dropdowns, pills as ready classes, composed from the same utilities, checkbox-driven, no JavaScript required.
Modern CSS
Built on today's CSS, not yesterday's workarounds, nor legacy tooling.
Modern CSS Under the Hood
Built on the platform, not around it
Cascade layers keep specificity predictable, color-mix() handles alpha, and clamp() drives fluid spacing instead of fixed breakpoints.
Scoped or Global
Plays well with other frameworks
Use CSS Vars as the whole framework, or scope it alongside an existing codebase without style collisions or digging into the old CSS.
Responsive & Fluid
Much more than a fixed grid
A clamp()-based spacing scale flexes with the viewport, alongside responsive images, galleries, tables, menus, maps, and embeds.
Performance
Less dependencies, less code to load, less code to run, less code to maintain.
Fast Loading
A small stylesheet makes wonders
A compact, minified core — utilities, components, and tokens included — keeps first paint quick even on the busiest page.
Icons Included
Advanced styling for SVG icons
Fill, size, and background utilities style inline SVG icons directly — no icon library required, though you're free to use one.
Lightweight
14KB gzipped.
A single minified stylesheet with every utility, component, and design token included. Covers 99% of websites and apps' needs.
Free & Open Source
Built with love, meant to be shared
Framework, components, and theme presets under an MIT license — download, use, extend, and share freely.
Everything starts with variables
CSS Vars Framework has no config file and no build step. Color, spacing, radius,
shadow and motion all live in custom properties declared once in :root. Every component
and utility class reads from those tokens instead of hardcoding values — change a token, and every
place that consumes it updates automatically.
9
Base tokens
1
Stylesheet
0
Build steps
:root {
--color-1: #3b82f6;
--default-border-radius: 0.5rem;
--space-1: clamp(1rem, 2vw, 2rem);
--box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,.12);
}
Utility classes
Around 500 single-purpose classes for one-off overrides, no new CSS required.
Utilities read a token wherever one exists, so overriding --space-2 also updates every
.p-t-2 / .m-t-2 already on the page.
- Spacing — margin & padding, two fluid scales
- Sizing — width/height in %, vw, rem, "100% minus N"
- Layout — flexbox, grid, position & offsets
- Borders & radius — width, style, color, gradient
- Color & background — solid, tinted, gradient
- Shadows — four levels, plain or color-tinted
- Typography — weight, case, spacing, line-height
- Effects & visibility — brightness, overflow, opacity
bg-success
bg-info
bg-warning
bg-luxury
bg-danger
bg-grey
bg-dark
bga-color-1
bga-color-2
bga-danger
bga-color-success
bga-color-info
bga-warning
bga-luxury
Elements
Every native or composed piece of UI the framework styles by default, all driven by the same panel, control and surface tokens.
- Buttons & controls — button, pill, chip
- Cards & panels — card, panel, promo box
- Forms — inputs, checkboxes, ratings, file upload
- Navigation — breadcrumb, dropdown, sidebar, mega menu
- Disclosure — tabs, accordion, tooltip
- Feedback — badge, message, table
- Media — carousel, gallery, masonry, light-box
- Overlays — modal
Success — your changes have been saved.
Error — something went wrong.
Warning — double-check your input.
Info — a new version is available.
Hover the highlighted terms: CSS Vars A zero-JS, single-stylesheet framework and tokens Custom properties declared once in :root .
Reviewed by @kim.majali KM Kim Majali Creator, CSS Vars Framework Building dependency-free, zero-JS CSS tooling. 500+ utility classes, one stylesheet. 128 repos 4.2k stars on Jul 29.
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Kim | Doe | [email protected] |
| Dan | Doe | [email protected] |
Fast by default
No build step, no bundler, no runtime JS to ship.
Themeable
Every value flows from :root.
~500
utility classes
0KB
JavaScript
Open source on GitHub
Styles
28 ready-made style presets, layered on top of the same components and tokens — swap the whole visual identity of a page, or just one section, by adding one class.
Modern
Colour blocks, clean lines, subtle shadows
Editorial
Blogs, magazines, long-form reading
Glass
Frosted-glass fintech & health-tech UIs
Pastel
Wellness, education & family-friendly apps
Brutal
Bold, disruptive, anti-design
Luxury
Premium brands, dramatic experiences
Neon
Nightclubs, gaming, media streaming
Futuristic
AI, dev tools, crypto, startups
Blocks
Ready-made HTML sections, organized by category — copy one in, then customize with existing classes. No new CSS to write.
Templates
Full look-and-feel swaps driven by data-theme and a handful of
base color tokens — enough coverage, out of the box, to build every page a website typically needs.
Build quality responsive websites quickly
No JavaScript or other libraries needed — pure HTML & CSS, styled by variables, to build great websites.