Overview
API Reference
This section provides detailed reference documentation for working with Master CSS.
Design Token
Colors
Customizing color variables or starting with the crafted palette.
Primitive Colors
Customizing primitive color variables or starting with the official design system.
Frame Colors
Customizing frame color variables or starting with the official design system.
Text Colors
Customizing text color variables or starting with the official design system.
Fonts
Customizing fonts for your design system.
Screens
Customizing screen sizes and breakpoints for your design system.
Spacing and Sizing
Apply consistent sizes across your application.
Syntax
accent-color
Setting the accent color of user interface elements or controls.
align-content
Controlling how multiple rows or columns are aligned along its cross axis.
align-items
Controlling how items are aligned along its cross axis.
align-self
Controlling how an individual item is aligned along its cross axis.
animation
Applying an animation between styles.
animation-delay
Setting a time to delay before beginning to perform the animation.
animation-direction
Setting the direction of the animation.
animation-duration
Setting the length of time that an animation takes to complete one cycle.
animation-fill-mode
Setting how a CSS animation applies styles to its target before and after its execution.
animation-iteration-count
Setting the number of times an animation should be played.
animation-name
Setting the names of the animation.
animation-play-state
Setting whether an animation is running or paused.
animation-timing-function
Setting speed curve of the animation.
appearance
Controlling the native appearance of UI controls.
aspect-ratio
Setting the ratio for the box.
backdrop-filter
Style syntax for applying filter effects to the area behind an target element.
background
Setting all background style properties at once.
background-attachment
Setting whether position of background image is fixed when scrolling.
background-blend-mode
Setting how an element's background images should blend with the background color.
background-clip
Controlling how clip the background.
background-color
Setting the background color of an element.
background-image
Setting background images on an element.
background-origin
Setting the background's origin.
background-position
Setting the initial position for background image.
background-repeat
Setting how background images are repeated.
background-size
Setting the size of the background image.
border
Setting an element’s border.
border-collapse
Setting whether table cell have shared or separate borders.
border-color
Setting the color of an element’s border.
border-radius
Setting radius of an element’s corners.
border-style
Setting the line style for an element’s border.
border-width
Setting the width of an element’s border.
box-decoration-break
Setting how an element's fragments should be rendered when broken across multiple lines, columns, or pages.
box-shadow
Adding shadow effects around an element.
box-sizing
Setting how the total width and height of an element is calculated.
break-after
Controlling how page, column, or region breaks should occur after an element.
break-before
Controlling how page, column, or region breaks should occur before the specified element.
break-inside
Controlling how page, column, or region breaks should occur within the specified element.
caret-color
Setting the color of the cursor in text input.
clear
Moving an element below floating elements instead of floating to the left or right.
clip-path
Creating a clipping region.
color
Setting foreground color of an element.
column-span
Setting how elements span across multiple columns.
columns
Setting the number of columns within the container.
contain
Providing performance benefits by limiting calculations of layout.
content
Replacing an element with a generated value.
cursor
Setting the mouse cursor style.
direction
Setting the direction of text.
display
Controlling the element's inner and outer display types.
fill
Setting the color of an SVG shape.
filter
Applying graphic effects to an element.
flex
Setting how flex items grow or shrink.
flex-basis
Setting the initial main size of a flex item.
flex-direction
Setting the direction of flex items.
flex-grow
Setting how flex items grow.
flex-shrink
Setting how flex items shrink.
flex-wrap
Setting how flex items wrap.
float
Placing an element on the left or right side of its container.
font
Setting font properties of an element.
font-family
Setting the font for an element.
font-feature-settings
Controlling advanced typographic features in OpenType fonts.
font-size
Setting the font size of elements.
font-smoothing
Controlling the font smoothing of an element.
font-style
Setting font style of an element.
font-variant-numeric
Controlling the usage of alternate glyphs for numbers, fractions, and ordinal markers.
font-weight
Setting the weight of the font.
gap
Setting the gutters between rows and columns.
grid
Setting layout of grid system.
grid-area
Setting a size and location within a grid.
grid-auto-columns
Setting the size of the grid columns.
grid-auto-flow
Controlling how auto-placed items get inserted in the grid.
grid-auto-rows
Setting the size of the grid rows.
grid-column
Setting a grid items's size and location in a grid layout.
grid-columns
Style utility for creating multiple grid columns.
grid-row
Setting a grid items's size and location in a grid layout.
grid-rows
Style utility for creating multiple grid rows.
grid-template
Setting grid columns, grid rows, and grid areas.
grid-template-areas
Setting areas in the grid container
grid-template-columns
Creating columns in a grid layout.
grid-template-rows
Creating rows in a grid layout.
height
Setting an element’s height.
hyphens
Set how to split words to improve the layout of paragraphs.
inset
Setting distance between an element and the parent element.
isolation
Controlling whether an element should create a new stacking context.
justify-content
Controlling how items are aligned along its main axis.
justify-items
Controlling how items are aligned along its inline axis.
justify-self
Controlling how an individual item is aligned along its inline axis.
letter-spacing
Setting the spacing between text characters.
line-clamp
Limiting the contents of a container to the specified number of lines.
line-height
Setting the height of a line box.
list-style
Setting all the list style properties at once.
list-style-image
Replacing the list item marker with an image.
list-style-position
Setting the position of the list item marker.
list-style-type
Setting the style of the list item marker.
margin
Setting the margin area on all four sides of an element.
mask-image
Setting the image that is used as mask layer for an element.
max-height
Setting the maximum height of an element.
max-size
Style shorthand for setting the max-width and max-height of an element.
max-width
Setting the maximum width of an element.
min-height
Setting the minimum height of an element.
min-size
Style shorthand for setting the min-width and min-height of an element.
min-width
Setting the minimum width of an element.
mix-blend-mode
Setting how an element's content should blend with its parent background.
object-fit
Setting how the content should be resized to fit its container.
object-position
Setting the alignment of the selected replaced element within the element's box.
opacity
Setting the opacity of an element.
order
Changing the order of item in flex or grid container.
outline
Setting all the outline properties at once.
outline-color
Setting the color of an element’s outline.
outline-offset
Setting the spacing between an outline and the border of an element.
outline-style
Setting the style of an element's outline.
outline-width
Setting the thickness of an element's outline.
overflow
Controlling the desired behavior for an element's overflow.
overscroll-behavior
Setting what a browser does when reaching the boundary of a scrolling area.
padding
Setting the padding area on all four sides of an element.
place-content
Setting align-content and justify-content at the same time.
place-items
Setting align-items and justify-items at the same time.
place-self
Setting align-self and justify-self at the same time.
pointer-events
Setting whether an element reacts to pointer events.
position
Setting an element is positioned in a document.
resize
Setting whether an element is resizable.
screen-readers
Style utility for imporving the accessibility with screen readers.
scroll-behavior
Setting the scrolling behavior for a scrolling box.
scroll-margin
Setting the scroll margin of an element.
scroll-padding
Setting the scroll padding of an element.
scroll-snap-align
Setting the scroll snap position.
scroll-snap-stop
Setting whether scroll container is pass over snap positions.
scroll-snap-type
Setting how strictly snap points are enforced on the scroll container.
shape-image-threshold
Setting the alpha channel threshold for a CSS shape.
shape-margin
Setting a margin for a CSS shape.
shape-outside
Setting a shape around which adjacent inline content should wrap.
size
Style shorthand for setting the width and height of an element.
stroke
Setting the outline color of an SVG shape.
stroke-width
Setting the width of the stroke to be applied to the SVG shape.
text-align
Setting the text alignment of an element.
text-decoration
Setting the appearance of decorative lines on text.
text-decoration-color
Setting the color of decorative lines on text.
text-decoration-line
Setting the kind of decoration that is used on text.
text-decoration-style
Setting the style of the decoration line that is used on text.
text-decoration-thickness
Setting thickness of the decoration line.
text-fill-color
Setting the color of text.
text-indent
Setting indentation of the first line.
text-orientation
Setting orientation of the text characters in a line.
text-overflow
Handling how hidden overflow content.
text-rendering
Setting what to optimize when rendering text.
text-shadow
Adding shadows to text.
text-size
Style utility for setting the font size with a golden-ratio line height.
text-stroke
Setting the width and color of strokes for text characters.
text-stroke-color
Setting the color of the stroke for text characters.
text-stroke-width
Setting the width of the stroke for text characters.
text-transform
Controlling capitalization of text.
text-underline-offset
Setting the distance of a text decoration line from its original position.
text-wrap
Controlling how text inside an element is wrapped.
touch-action
Setting how an element's region can be manipulated by a touchscreen user.
transform
Controlling rotate, scale, skew, or translate an element.
transform-box
Defining the layout box to which transform and transform-origin properties relate.
transform-origin
Setting the origin for an element’s transformations.
transform-style
Setting how children of an element are rendered in the 3D space.
transition
Controlling animation speed when changing CSS properties.
transition-delay
Setting a time to delay before starting transition.
transition-duration
Setting the length of time a transition should takes to complete.
transition-property
Setting the CSS properties to which a transition effect should be applied.
transition-timing-function
Setting speed curve of the transition effect.
user-drag
Controlling whether the user can drag element.
user-select
Controlling whether the user can select text.
variable
CSS variables defined specific values to be reused throughout a document.
vertical-align
Setting vertical alignment.
visibility
Controlling whether an element is visible.
white-space
Controlling how whitespace and line breaks within an element are handled.
width
Setting an element’s width.
will-change
Setting how an element is expected to change in the browser.
word-break
Setting whether words should break.
word-spacing
Setting the spacing between words.
writing-mode
Setting different writing mode.
z-index
Set the z-order of a positioned element.
Integration
Create App
Set up or create a modern web app by running one command.
CLI
Command line interface for Master CSS.
Core
The core syntax parsing of Master CSS.
DevTools Hook
A global bridge injected into the browser runtime.
ESLint
The ESLint configuration and plugin reference for Master CSS.
Extractor
Master CSS static extractor for various raw text extraction.
Language
The language declaration, TextMate grammars provide syntax highlighting and improved editor integration.
Language Server
The language server reference for Master CSS.
Language Service
The language service reference for Master CSS.
Normal CSS
Normalize modern browser styles.
React
A React integration for Master CSS
Runtime
The core syntax parsing and runtime engine of Master CSS.
Validator
Validator for Master CSS syntactic class.