CSS Property Reference

Reference for ~80 common CSS properties organized by category. Search by property name, syntax, or values.

Layout

display

display: block | inline | flex | grid | none

Values: block, inline, inline-block, flex, grid, none

All browsers

position

position: static | relative | absolute | fixed | sticky

Values: static, relative, absolute, fixed, sticky

All browsers

float

float: left | right | none

Values: left, right, none

All browsers

clear

clear: none | left | right | both

Values: none, left, right, both

All browsers

overflow

overflow: visible | hidden | scroll | auto

Values: visible, hidden, scroll, auto, clip

All browsers

overflow-x

overflow-x: visible | hidden | scroll | auto

Values: visible, hidden, scroll, auto

All browsers

overflow-y

overflow-y: visible | hidden | scroll | auto

Values: visible, hidden, scroll, auto

All browsers

z-index

z-index: auto | <integer>

Values: auto, integer (e.g. 1, 10, 999)

All browsers

flex-direction

flex-direction: row | row-reverse | column | column-reverse

Values: row, row-reverse, column, column-reverse

All modern

flex-wrap

flex-wrap: nowrap | wrap | wrap-reverse

Values: nowrap, wrap, wrap-reverse

All modern

flex-grow

flex-grow: <number>

Values: 0, 1, or any positive number

All modern

flex-shrink

flex-shrink: <number>

Values: 0, 1, or any positive number

All modern

flex-basis

flex-basis: auto | <length>

Values: auto, 0, 100px, 50%

All modern

justify-content

justify-content: flex-start | center | flex-end | space-between | space-around

Values: flex-start, center, flex-end, space-between, space-around, space-evenly

All modern

align-items

align-items: stretch | flex-start | center | flex-end | baseline

Values: stretch, flex-start, center, flex-end, baseline

All modern

align-self

align-self: auto | stretch | flex-start | center | flex-end

Values: auto, stretch, flex-start, center, flex-end, baseline

All modern

gap

gap: <length>

Values: 0, 8px, 1rem, 1em

All modern

grid-template-columns

grid-template-columns: none | <track-list>

Values: none, 1fr 1fr 1fr, repeat(3, 1fr), 100px auto 1fr

All modern

grid-template-rows

grid-template-rows: none | <track-list>

Values: none, auto 1fr auto, repeat(2, 100px)

All modern

grid-column

grid-column: <grid-line>

Values: 1 / 2, span 2, 1 / -1

All modern

grid-row

grid-row: <grid-line>

Values: 1 / 2, span 2

All modern

Box Model

margin

margin: <length> | auto

Values: 0, 8px, 1rem, auto

All browsers

margin-top

margin-top: <length> | auto

Values: 0, 8px, 1rem, auto

All browsers

margin-right

margin-right: <length> | auto

Values: 0, 8px, 1rem, auto

All browsers

margin-bottom

margin-bottom: <length> | auto

Values: 0, 8px, 1rem, auto

All browsers

margin-left

margin-left: <length> | auto

Values: 0, 8px, 1rem, auto

All browsers

padding

padding: <length>

Values: 0, 8px, 1rem, 1em

All browsers

padding-top

padding-top: <length>

Values: 0, 8px, 1rem

All browsers

padding-right

padding-right: <length>

Values: 0, 8px, 1rem

All browsers

padding-bottom

padding-bottom: <length>

Values: 0, 8px, 1rem

All browsers

padding-left

padding-left: <length>

Values: 0, 8px, 1rem

All browsers

border

border: <width> <style> <color>

Values: 1px solid #000, 2px dashed red

All browsers

border-radius

border-radius: <length> | %

Values: 0, 4px, 50%, 8px 16px

All browsers

width

width: auto | <length> | %

Values: auto, 100px, 50%, 100vw

All browsers

height

height: auto | <length> | %

Values: auto, 100px, 50%, 100vh

All browsers

min-width

min-width: <length> | %

Values: 0, 100px, 50%

All browsers

max-width

max-width: <length> | % | none

Values: none, 100%, 1200px

All browsers

min-height

min-height: <length> | %

Values: 0, 100px, 100vh

All browsers

max-height

max-height: <length> | % | none

Values: none, 100%, 500px

All browsers

box-sizing

box-sizing: content-box | border-box

Values: content-box, border-box

All browsers

Typography

font-family

font-family: <family-name>

Values: Arial, 'Times New Roman', system-ui, sans-serif

All browsers

font-size

font-size: <length> | <percentage>

Values: 16px, 1rem, 100%, 1.2em

All browsers

font-weight

font-weight: normal | bold | 100-900

Values: normal, bold, 100, 400, 700, 900

All browsers

font-style

font-style: normal | italic | oblique

Values: normal, italic, oblique

All browsers

line-height

line-height: normal | <number> | <length>

Values: normal, 1.5, 24px, 150%

All browsers

text-align

text-align: left | right | center | justify

Values: left, right, center, justify

All browsers

text-decoration

text-decoration: none | underline | line-through | overline

Values: none, underline, line-through, overline

All browsers

text-transform

text-transform: none | uppercase | lowercase | capitalize

Values: none, uppercase, lowercase, capitalize

All browsers

letter-spacing

letter-spacing: normal | <length>

Values: normal, 1px, 0.1em

All browsers

word-spacing

word-spacing: normal | <length>

Values: normal, 2px, 0.5em

All browsers

color

color: <color>

Values: #000, rgb(0,0,0), hsl(0,0%,0%)

All browsers

white-space

white-space: normal | nowrap | pre | pre-wrap

Values: normal, nowrap, pre, pre-wrap, pre-line

All browsers

Background

background-color

background-color: <color> | transparent

Values: #fff, rgb(), transparent

All browsers

background-image

background-image: none | url() | linear-gradient()

Values: none, url(...), linear-gradient(...)

All browsers

background-size

background-size: auto | cover | contain | <length>

Values: auto, cover, contain, 100px 100px

All browsers

background-position

background-position: <position>

Values: top left, center, 50% 50%, 10px 20px

All browsers

background-repeat

background-repeat: repeat | no-repeat | repeat-x | repeat-y

Values: repeat, no-repeat, repeat-x, repeat-y

All browsers

background-attachment

background-attachment: scroll | fixed | local

Values: scroll, fixed, local

All browsers

Transform & Animation

transform

transform: none | <transform-function>

Values: translateX(10px), rotate(45deg), scale(1.2)

All modern

transform-origin

transform-origin: <position>

Values: center, top left, 50% 50%

All modern

transition

transition: <property> <duration> <timing>

Values: all 0.3s ease, opacity 0.2s

All modern

transition-property

transition-property: all | none | <property>

Values: all, none, opacity, transform

All modern

transition-duration

transition-duration: <time>

Values: 0s, 0.3s, 500ms

All modern

transition-timing-function

transition-timing-function: ease | linear | ease-in | ease-out

Values: ease, linear, ease-in, ease-out, cubic-bezier()

All modern

animation

animation: <name> <duration> <timing> <delay> <iteration>

Values: fade 1s ease 0s infinite

All modern

animation-name

animation-name: none | <keyframes-name>

Values: none, fadeIn, slideUp

All modern

animation-duration

animation-duration: <time>

Values: 0s, 1s, 500ms

All modern

animation-iteration-count

animation-iteration-count: <number> | infinite

Values: 1, 3, infinite

All modern

opacity

opacity: <number>

Values: 0, 0.5, 1

All browsers

Visual

box-shadow

box-shadow: none | <shadow>

Values: 0 2px 4px rgba(0,0,0,0.2)

All browsers

outline

outline: <width> <style> <color>

Values: 1px solid blue, none

All browsers

outline-offset

outline-offset: <length>

Values: 0, 2px, -2px

All browsers

cursor

cursor: auto | pointer | default | ...

Values: auto, pointer, default, not-allowed, grab

All browsers

visibility

visibility: visible | hidden | collapse

Values: visible, hidden, collapse

All browsers

object-fit

object-fit: fill | contain | cover | none

Values: fill, contain, cover, none, scale-down

All modern

Live CSS Playground

Preview