One stylesheet, hundreds of pure CSS utilities and components, and a design-token layer that lets you restyle an entire site by changing a handful of variables.
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. Please, visit https://cssvars.com
CSS Vars Framework exists to prove that modern web development does not have to be complex.
Over the years, building a simple website has gradually come to depend on large frameworks, JavaScript libraries, build tools, preprocessors, package managers, and countless third-party dependencies. These tools solve real problems, but they also add page weight, complexity, maintenance cost, and a steeper learning curve than the underlying task usually justifies.
CSS Vars Framework takes a different approach. Modern CSS is already powerful enough — clamp(), color-mix(), @layer, :checked selectors — to build fast, responsive, accessible, and beautiful websites without stacking layers of abstraction on top of it. The framework's job is to organize that native power into a coherent system, not to replace it with a new one.
For projects:
- Performance-sensitive projects — a single stylesheet and zero JS is a real edge for Core Web Vitals, especially on content-heavy sites.
- Small to medium websites — fast-loading by default, with easy theming through CSS variables instead of a design system rebuild.
- Old, custom-built websites - scoped naming avoids collisions with whatever custom CSS already exists, so you can add or fix sections of an old site without risking the rest of it.
- Projects that need easy white-labeling — update a handful of root variables and every themed surface follows automatically.
- Static site generators — nothing needs compiling, so the stylesheet drops straight into the build output.
- CMS-based sites — one link tag does the job instead of integrating a JS build pipeline into a PHP or CMS template.
For development workflow:
- Developers who don't want a build pipeline — no npm, PostCSS, Tailwind, Vite, or Sass required to ship a page.
- Designers who want runtime theming — change a variable and the whole site updates instantly; no recompiling, no config files.
- Teams that want both components and utilities — drop in a component as-is, or compose a one-off layout from utilities, using the same stylesheet either way.
- Developers who prefer native CSS — Build with standard HTML and CSS instead of framework-specific syntax or generated class names.
One CSS file. No dependencies, no tooling, no installs.
Just link one CSS file
No npm install, no bundler config, no build scripts or package.json to maintain — drop in the stylesheet and start building.
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.
One design language. Change a token, and every component and utility using it updates.
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.
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.
Cards, panels, dropdowns & menus, built in
Common patterns — cards, panels, sidebars, dropdowns, pills, chips — ship as ready classes, composed from the same utilities, checkbox-driven, no JavaScript required.
Built on today's CSS, not yesterday's workarounds, nor legacy tooling.
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.
Plays well with other frameworks
Use CSS Vars as the whole framework, or scope it alongside an existing codebase without style collisions.
Much more than a fixed grid
A clamp()-based spacing scale flexes with the viewport, alongside responsive images, galleries, tables, menus, maps, and embeds.
Less dependencies, less code to load, less code to run, less code to maintain.
A small stylesheet makes wonders
A compact, minified core — utilities, components, and tokens included — keeps first paint quick even on the busiest page.
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.
14KB gzipped.
A lightweight, minified core with utilities, components, and design tokens included, no build tools required.
Apply by adding one class, any of the most 20 web design styles: minimalist, modern, material, flat, brutal, glass, retro, neon, cyberpunk, luxury, playful, modular, system-ui, and more.
14 themes, to change theme change the variables in the CSS file, you can choose one of the pre-built themes, or change the variables to match your needs
Pre-built dark & light themes and you can enable auto detect theme switcher based on the user's browser settings
Built with love to be used. Free framework, UI elements, & themes. Download, use, enjoy & share
- Read the documentation on our website https://cssvars.com
- Styling with Variables
- Utility Classes Reference