A Virtual CSS language with enhanced syntax.

Efficiently build your UI and design system with HTML only.

<button class="btn ">

All features included in ~14KB

styles
selector
breakpoints
colors
@media
function()
schemes
clothes
texture crew sweater
Designed for on the move
$120.0 USD
size
Get delivery dates
Style variants

186+ styles out of the box.

The styles are pre-configured and optimized, so you can build whatever you want right away.

<div class="bg:gray-22 p:10 r:10 max-w:350">
<img class="object:cover w:full square r:5" src="/images/clothes.jpeg" loading="lazy" alt="clothes" />
<div class="mt:10 p:15">
<div class="font:24 font:bold capitalize">texture crew sweater</div>
<div class="font:14 font:gray-66 mt:5">Designed for on the move</div>
<div class="mt:12 font:semibold">$120.0 USD</div>
<div class="mt:12 flex gap:8">
<button class="square w:40 h:40 font:0 round b:1|solid|gray-28 p:3">
<div class="bg:white full round">white</div>
</button>
<button class="square w:40 h:40 font:0 round b:1|solid|gray-28 p:3">
<div class="bg:#999 full round">white</div>
</button>
<button class="square w:40 h:40 font:0 round b:1|solid|gray-28 p:3">
<div class="bg:#333 full round">white</div>
</button>
</div>
<div class="mt:20 font:12 font:semibold letter-spacing:2 font:gray-66 uppercase">size</div>
<div class="mt:12 flex gap:8">
<button class="p:10|15 r:3 font:14 font:semibold b:1|solid|gray-28">XS</button>
<button class="p:10|15 r:3 font:14 font:semibold bg:gray-28">S</button>
<button class="p:10|15 r:3 font:14 font:semibold b:1|solid|gray-28">M</button>
<button class="p:10|15 r:3 font:14 font:semibold b:1|solid|gray-28">L</button>
<button class="p:10|15 r:3 font:14 font:semibold b:1|solid|gray-28">XL</button>
</div>
<a class="font:gray-66 font:12 text:underline mt:20 inline-block" href="/">
Get delivery dates
</a>
</div>
</div>
modern effects 1
modern effects 2
modern effects 3
modern effects 4
modern effects 5
Modern effects

Advanced effects, ready to use.

Want to rapidly add filter, transform, and grid ? We've provided shorthand values like scale(2), blur(5) to make it easier for you to implement modern CSS effects.

<div class="grid-cols:3 gap:10 align-items:center {object:cover;width:full}_img">
<div class="rotate(-8) aspect:2/3"><img src="/images/modern-effect1.jpeg" width="200" height="300" alt="modern effects 1" quality={1} /></div>
<div class="translateY(-30) translateY(-140)@sm blur(5) aspect:2/3"><img src="/images/modern-effect2.jpeg" width="200" height="300" alt="modern effects 2" quality={1} /></div>
<div class="transform:scale(.8)rotate(8) aspect:2/3"><img src="/images/modern-effect3.jpeg" width="200" height="300" alt="modern effects 3" quality={1} /></div>
<div class="sepia(1) translate(-40,20) mask-image:linear-gradient(black,transparent) aspect:2/3"><img src="/images/modern-effect4.jpeg" width="200" height="300" alt="modern effects 4" quality={1} /></div>
<div class="blend:lighten grayscale(1) grid-col:2/2|span grid-row:2/2|span mt:-50 mask-image:linear-gradient(black,transparent)"><img src="/images/modern-effect5.jpeg" width="400" height="600" alt="modern effects 5" quality={50} /></div>
</div>
  • avatar
    aron
    3:03 a.m

    Front-end needs a revolution

  • avatar
    joy
    7:38 p.m

    Shilin night market later 🥰 ?

  • avatar
    miles
    5 mins ago

    task done 🙌🏻

  • avatar
    benseage
    3 hours ago

    Easy game easy life

  • avatar
    lola
    11 seconds ago

    Let me write the doc !

States and selectors

Selectors are now possible.

Never thought to use CSS selectors like :hover, :before, ::placeholder, and :where() directly in HTML?

Learn more about Selectors
<div class="bg:gray-22.active active p:8|20_li p:10|0 r:10 w:full max-w:340@sm">
<input class="bg:gray-18:focus font:gray-40::placeholder outline:0 font:14 w:calc(100%-1.25rem) mx:10 p:12 lh:1 r:5" placeholder="Search for chats and messages" type="search" />
<ul class="@shake|1s|infinite>li:first list-style:none mt:10">
{users.map((user, index) =>
<li class="bg:gray-28:hover bg:gray-32:active flex gap:12 cursor:pointer" key={index}>
<div class="rel">
<img src={user.url} width="40" height="40" class="round object:cover" alt="avatar" />
{index < 2 && <svg class="abs right:1 bottom:1 bg:green-70 outline:2|solid|white outline:gray-22@dark round w:7 h:7" />}
</div>
<div>
<div class="flex align-items:center">
<div class="text:14 font:medium font:gray-88@dark capitalize">{user.name}</div>
<div class="font:12 font:fade-54 font:gray-44@dark ml:8">{user.time}</div>
</div>
<p class="text:13 m:0">{user.message}</p>
</div>
</li>
)}
</ul>
</div>
Optimum layout

Responsive design. Have it anywhere.

With 10 responsive breakpoints: @[email protected], our presets are suitable for almost all situations and devices. You can use not only arbitrary breakpoints such as font:[email protected]>=1234, but also operators. For example text:[email protected]>=768&<1024 .

Breakpoints apply to all styles, so that you can implement the most refined layout.

Learn more about Breakpoints
/examples/responsive-breakpoints
<h2>Mountain Photos</h2>
<div class="grid-cols:2 grid-cols:3@xs grid-cols:4@sm grid-cols:5@md gap:15 gap:20@sm mt:20">
<div class="flex grid-col-span:2 grid-row-span:2">
<img class="r:5" src={`/images/mountain1.jpeg`} width="600" height="300" alt="mountain" quality={50} priority={true} />
</div>
{mountains.map((mountain) =>
<div class="flex" key={mountain}>
<img class="r:5" src={`/images/${mountain}.jpeg`} width="300" height="150" alt="mountain" quality={50} priority={true} />
</div>
)}
</div>

Experience

Stay lazy for a better experience.

Less coding, less thinking, less maintaining.

Automatic Generation

No CSS rules to write, no CSS files to maintain.

Intelligent Rules

Sorting rules by behavior and breakpoints.

Unit Conversion

Presets with practical units based on properties.

<head>
<style id="master-css"></style>
</head>
<body>
<h1 class="">
Watch how I speed up the production
</h1>
<h2 class="">
Watch how I sort the breakpoints
</h2>
<a class="">
Watch how I sort the behavior
</a>
<p class="">
Watch how I convert the units
</p>
</body>
/* Automatically generate CSS rules in <style id="master-css"> */
Why should I use Master CSS?

Syntax

Brief, but powerful.

More succinct, more intuitive, more agile.

No naming constraints

Composing UI like Lego without naming keeps the flexibility of modification.

Syntactic Sugar

Use shorthands, semantics, acronyms, symbols, groups to make your code leaner.

Faster Implementation

Directly add @breakpoint, :selector, and even !important to the suffix and it works right away.

Semantics

semanticsWriting CSS in class attributes feels weird?

Our intention isn't to let you write CSS directly, but you can still do it.

<a class="display:block font-style:italic aspect:1/1 border-radius:50% width:100% height:100% position:relative visibility:invisible isolation:isolate"></a>

Try using more sensible semantics. 63% code

<a class="block italic square round full rel invisible isolate"></a>
Check out our Syntax Tutorial
Shorthands

semanticsClass attributes get too long?

<a class="animation-name:fade animation-duration:1s animatino-timing-function:ease transition-property:opacity transition-duration:.3s margin-top:1rem margin-bottom:1rem margin-right:2rem margin-left:2.5rem"></a>

Try rewriting in shorthand. 62% code

<a class="animation:fade|1s|ease transition:opacity|.3s margin:16|32|16|40"></a>

and with recommended symbols and acronyms. 80% code

<a class="@fade|1s|ease ~opacity|.3s m:16|32|16|40"></a>
Check out our Syntax Tutorial
Enhanced

semanticsWhy not just inline styles?

I want the button to be bigger at viewport width >=1024px and then fade when disabled.

<button style="font-size: .875rem; text-align: center; height: 2.5rem;" disabled>Oops...</button>

Inline styles cannot apply selectors, media queries, and many CSS features. With Master CSS, you can now implement them with the most succinct syntax.

<button class="font:14 text:center height:40 height:56@md opacity:.5[disabled]" disabled>Yeah!</button>
Check out our Syntax Tutorial
Groups

group featureSo cool, it's a group feature!

<ul class="block>li:hover@md p:16>li:hover@md w:full>li:hover@md text:center>li:hover@md font:blue/.5>li:hover@md"></ul>

DRY (Don't Repeat Yourself) up and make your CSS more readable. 45% code

<ul class="{block;p:16;w:full;text:center;font:blue/.5}>li:hover@md"></ul>
Check out our Syntax Tutorial

Customization

Customize to your design system.

Sometimes arbitrary, sometimes unified.

import { Style } from '@master/css';
Style.extend('classes', {
btn: 'px:18 h:40 font:14 font:medium r:4 inline-flex align-items:center',
container: 'max-w:1280 px:20 px:[email protected] mx:auto'
});
<!-- Using them in your HTML would look like this. -->
<button class="btn bg:blue-60 bg:blue-36:hover">
Submit
</button>
<div class="container text:center">
<h2>Customize to your design system.</h2>
</div>
Learn more about Customization

Flexibility

Awaken CSS in HTML and JS.

Accomplish more with more flexibility.

Aa
<div class="font:teal-70 font:purple-70:hover font:96 font:heavy">Aa</div>

Dynamically assign values.

Dynamic assignment is applicable to all styles, so you can assign even after fetching data from the server.

<div className={`font:teal-${size} font:purple-${size}:hover font:96 font:heavy`}>
    Aa
</div>
Aa
<div class="scaleX(-1) ~transform|.3s font:96 font:heavy font:96 font:heavy">Aa</div>

Conditionally apply class names.

To conditionally manipulate class names, you can use vanilla JS or any other framework.

<div className={(flipped ? 'scaleX(-1) ' : '') + '~transform|.3s font:96 font:heavy font:96 font:heavy'}>
    Aa
</div>

Performance

Hybrid Rendering

You get runtime flexibility and faster page loads.

On-demand Injection

Scan class names of the current page, and only generate the CSS required by the current page.

AOT and JIT

Generate CSS ahead of time to improve FCP and continue to use JIT on the browser side.

Sharing CSS Rules

With a diffing algorithm, CSS rules won't be duplicated, which reduces output size.

import * as express from 'express';
import { Style, StyleSheet } from '@master/css';
import { render } from '@master/css/render';
// A simple example for express
app.get('/', function(req, res) {
res.render('index.html', (error, html) => {
if (err) console.log(err)
return render(html, { StyleSheet }).html;
})
})
<!-- User gets pre-rendered HTML on the browser side. -->
<!DOCTYPE html>
<html lang="en">
<head>
<style id="master-css">...</style>
<title>Master CSS - A Virtual CSS language with enhanced syntax</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.master.co/css"></script>
</head>
<body>
<h1 class="block font:48@md p:12">Hello World</h1>
<a class="bg:blue bg:blue-64:hover">Get Started</a>
<p class="bg:blue bg:blue-64:hover">Sharing CSS Rules</p>
</body>
</html>
/* <style id="master-css"> */
.block {
display: block
}
.p\:12 {
padding: 0.75rem
}
.bg\:blue {
background-color: #175fe9
}
.bg\:blue-64\:hover:hover {
background-color: #6599f0
}
@media (min-width:1024px) {
.font\:48\@md {
font-size: 3rem
}
}
Learn more about Hybrid Rendering

IDE

Make your IDE pro than ever.

A forerunner to syntax highlighting for class names.

Code-completion

Smart suggestions for style names, values, semantics and selectors.

Syntax Highlighting

Highlight class names to make them easier to read and identify.

Generate preview

Hover over Master class names to see their CSS generation.

Learn more about Developer Tools

One language. Anywhere.

Get started with your frameworks or build tools.