Toolative
Back to tools

CSS Properties Reference

Complete reference for CSS properties — click any property name to copy it. 153 properties documented.

153 of 153
Defines how an element is rendered in the document flow.
Layout
block | inline | flex | grid | none | contents | …
inline
No
Sets how an element is positioned in the document.
Layout
static | relative | absolute | fixed | sticky
static
No
Vertical offset from the top edge for positioned elements.
Layout
<length> | <percentage> | auto
auto
No
Horizontal offset from the right edge for positioned elements.
Layout
<length> | <percentage> | auto
auto
No
Vertical offset from the bottom edge for positioned elements.
Layout
<length> | <percentage> | auto
auto
No
Horizontal offset from the left edge for positioned elements.
Layout
<length> | <percentage> | auto
auto
No
Floats an element to the left or right, letting content wrap around it.
Layout
left | right | none | inline-start | inline-end
none
No
Specifies whether an element can be next to floated elements.
Layout
none | left | right | both | inline-start | inline-end
none
No
Stacking order of a positioned element. Higher values appear in front.
Layout
auto | <integer>
auto
No
Controls how content that overflows the box is handled.
Layout
visible | hidden | clip | scroll | auto
visible
No
Controls horizontal overflow handling.
Layout
visible | hidden | clip | scroll | auto
visible
No
Controls vertical overflow handling.
Layout
visible | hidden | clip | scroll | auto
visible
No
Shows or hides an element without changing layout (unlike display:none).
Layout
visible | hidden | collapse
visible
Yes
Clips an element to a shape — circle, polygon, inset, SVG path, etc.
Layout
none | <clip-source> | <basic-shape>
none
No
Sets a preferred aspect ratio for the element (e.g. 16/9).
Layout
auto | <ratio>
auto
No
Shorthand for column-count and column-width in multi-column layout.
Layout
auto | <column-width> <column-count>
auto
No
Number of columns in a multi-column layout.
Layout
auto | <integer>
auto
No
Gap between columns (also used in flex/grid).
Layout
normal | <length> | <percentage>
normal
No
Sets the direction of flex items along the main axis.
Flexbox
row | row-reverse | column | column-reverse
row
No
Controls whether flex items wrap onto multiple lines.
Flexbox
nowrap | wrap | wrap-reverse
nowrap
No
Shorthand for flex-direction and flex-wrap.
Flexbox
<flex-direction> || <flex-wrap>
row nowrap
No
Aligns flex items along the main axis.
Flexbox
flex-start | flex-end | center | space-between | space-around | space-evenly
flex-start
No
Aligns flex items along the cross axis.
Flexbox
stretch | flex-start | flex-end | center | baseline
stretch
No
Aligns flex lines when there is extra space on the cross axis.
Flexbox
flex-start | flex-end | center | space-between | space-around | stretch
stretch
No
Overrides align-items for a single flex item.
Flexbox
auto | stretch | flex-start | flex-end | center | baseline
auto
No
Shorthand for flex-grow, flex-shrink, and flex-basis.
Flexbox
none | <flex-grow> <flex-shrink> <flex-basis>
0 1 auto
No
How much a flex item grows relative to others.
Flexbox
<number>
0
No
How much a flex item shrinks relative to others.
Flexbox
<number>
1
No
The initial size of a flex item before flex-grow/shrink is applied.
Flexbox
content | <width>
auto
No
Controls the order of flex (or grid) items. Lower values appear first.
Flexbox
<integer>
0
No
Shorthand for row-gap and column-gap in flex and grid containers.
Flexbox
<row-gap> <column-gap>
0
No
Space between flex rows or grid rows.
Flexbox
normal | <length> | <percentage>
normal
No
Defines the columns of a grid container with track sizes.
Grid
none | <track-list> | subgrid
none
No
Defines the rows of a grid container with track sizes.
Grid
none | <track-list> | subgrid
none
No
Defines named grid areas using quoted strings of cell names.
Grid
none | <string>+
none
No
Shorthand for grid-template-rows, -columns, and -areas.
Grid
none | <grid-template-rows> / <grid-template-columns>
none
No
Size of implicitly created grid columns.
Grid
auto | <track-size>
auto
No
Size of implicitly created grid rows.
Grid
auto | <track-size>
auto
No
Controls how auto-placed items fill the grid.
Grid
row | column | dense | row dense | column dense
row
No
Shorthand for grid-column-start and grid-column-end.
Grid
<grid-line> / <grid-line>
auto
No
Shorthand for grid-row-start and grid-row-end.
Grid
<grid-line> / <grid-line>
auto
No
Start position of an item on the column axis.
Grid
auto | <custom-ident> | <integer>
auto
No
End position of an item on the column axis.
Grid
auto | <custom-ident> | <integer>
auto
No
Start position of an item on the row axis.
Grid
auto | <custom-ident> | <integer>
auto
No
End position of an item on the row axis.
Grid
auto | <custom-ident> | <integer>
auto
No
Shorthand for row/column start and end, or named area placement.
Grid
<grid-line> / <grid-line> / <grid-line> / <grid-line>
auto
No
Shorthand for align-items and justify-items in a grid container.
Grid
<align-items> <justify-items>
normal stretch
No
Shorthand for align-content and justify-content.
Grid
<align-content> <justify-content>
normal
No
Shorthand for align-self and justify-self on a grid item.
Grid
<align-self> <justify-self>
auto
No
Width of the element's content area.
Box Model
auto | <length> | <percentage> | min-content | max-content | fit-content
auto
No
Height of the element's content area.
Box Model
auto | <length> | <percentage> | min-content | max-content | fit-content
auto
No
Minimum width — the element cannot be narrower than this.
Box Model
auto | <length> | <percentage>
auto
No
Maximum width — the element cannot be wider than this.
Box Model
none | <length> | <percentage>
none
No
Minimum height — the element cannot be shorter than this.
Box Model
auto | <length> | <percentage>
auto
No
Maximum height — the element cannot be taller than this.
Box Model
none | <length> | <percentage>
none
No
Shorthand for all four margins outside the border.
Box Model
<length> | <percentage> | auto (1–4 values)
0
No
Margin on the top side of the element.
Box Model
<length> | <percentage> | auto
0
No
Margin on the right side of the element.
Box Model
<length> | <percentage> | auto
0
No
Margin on the bottom side of the element.
Box Model
<length> | <percentage> | auto
0
No
Margin on the left side of the element.
Box Model
<length> | <percentage> | auto
0
No
Shorthand for all four paddings inside the border.
Box Model
<length> | <percentage> (1–4 values)
0
No
Padding on the top side of the element.
Box Model
<length> | <percentage>
0
No
Padding on the right side of the element.
Box Model
<length> | <percentage>
0
No
Padding on the bottom side of the element.
Box Model
<length> | <percentage>
0
No
Padding on the left side of the element.
Box Model
<length> | <percentage>
0
No
Shorthand for border-width, border-style, and border-color.
Box Model
<border-width> <border-style> <color>
medium none
No
Width of the border on all four sides.
Box Model
thin | medium | thick | <length> (1–4 values)
medium
No
Style of the border on all four sides.
Box Model
solid | dashed | dotted | double | groove | ridge | none (1–4 values)
none
No
Color of the border on all four sides.
Box Model
<color> (1–4 values)
currentcolor
No
Rounds the corners of the border box.
Box Model
<length> | <percentage> (1–4 corners)
0
No
Shorthand for top border width, style, and color.
Box Model
<border-width> <border-style> <color>
medium none
No
Defines whether width/height includes padding and border.
Box Model
content-box | border-box
content-box
No
Shorthand for outline-width, style, and color. Does not affect layout.
Box Model
<outline-width> <outline-style> <color>
medium none
No
Space between the outline and the border edge.
Box Model
<length>
0
No
Adds one or more shadow effects to the element's box.
Box Model
none | <inset> <x> <y> <blur> <spread> <color>
none
No
Prioritized list of font families for the element's text.
Typography
<family-name> | <generic-family>
browser default
Yes
Size of the font.
Typography
<absolute-size> | <relative-size> | <length> | <percentage>
medium
Yes
Weight (boldness) of the font.
Typography
normal | bold | bolder | lighter | 100–900
normal
Yes
Whether text is displayed normally, italicized, or oblique.
Typography
normal | italic | oblique
normal
Yes
Enables small-caps and other font variations.
Typography
normal | small-caps
normal
Yes
Shorthand for font-style, -variant, -weight, -size, line-height, -family.
Typography
<font-style> <font-variant> <font-weight> <font-size>/<line-height> <font-family>
—
Yes
Height of a line box. Use unitless values to avoid inheritance issues.
Typography
normal | <number> | <length> | <percentage>
normal
Yes
Spacing between characters (tracking).
Typography
normal | <length>
normal
Yes
Spacing between words.
Typography
normal | <length>
normal
Yes
Horizontal alignment of inline content within a block.
Typography
left | right | center | justify | start | end
start
Yes
Controls text capitalization.
Typography
none | capitalize | uppercase | lowercase
none
Yes
Shorthand for text-decoration-line, -style, -color, -thickness.
Typography
none | underline | overline | line-through | <color> <style>
none
No
Indentation of the first line of a block of text.
Typography
<length> | <percentage>
0
Yes
How overflowed text is signaled. Use with overflow: hidden and white-space: nowrap.
Typography
clip | ellipsis
clip
No
Shadow effects applied to text.
Typography
none | <offset-x> <offset-y> <blur> <color>
none
Yes
How whitespace inside an element is handled.
Typography
normal | nowrap | pre | pre-wrap | pre-line | break-spaces
normal
Yes
Whether line breaks occur at normal word boundaries or anywhere.
Typography
normal | break-all | keep-all | break-word
normal
Yes
Whether the browser may break within an unbreakable string.
Typography
normal | break-word | anywhere
normal
Yes
Vertical alignment of an inline or table-cell element.
Typography
baseline | top | middle | bottom | <length> | <percentage>
baseline
No
Text direction — left-to-right or right-to-left.
Typography
ltr | rtl
ltr
Yes
Foreground color of the element's text and decorations.
Color
<color>
canvastext
Yes
Shorthand for all background properties.
Color
<bg-color> <bg-image> <bg-position> / <bg-size> <bg-repeat> …
transparent
No
Background color of the element.
Color
<color>
transparent
No
Background image(s) of the element.
Color
none | <image> | <gradient>
none
No
Size of background image(s).
Color
auto | cover | contain | <length> <length>
auto
No
Starting position of each background image.
Color
top | center | bottom | left | right | <length> | <percentage>
0% 0%
No
How background images are repeated.
Color
repeat | repeat-x | repeat-y | no-repeat | space | round
repeat
No
Area within which the background is painted.
Color
border-box | padding-box | content-box | text
border-box
No
Background positioning area.
Color
padding-box | border-box | content-box
padding-box
No
Whether background scrolls with the viewport or is fixed.
Color
scroll | fixed | local
scroll
No
Transparency level of the element and all its children.
Color
<number 0–1>
1
No
How an element's content blends with the parent's content.
Color
normal | multiply | screen | overlay | darken | lighten | …
normal
No
Accent color for UI controls like checkboxes and radio buttons.
Color
auto | <color>
auto
Yes
Applies 2D or 3D transformations (translate, rotate, scale, skew).
Transform
none | <transform-function>+
none
No
Origin point for transformations.
Transform
<position>
50% 50% 0
No
Whether children are positioned in 3D space.
Transform
flat | preserve-3d
flat
No
Distance from the user to the z=0 plane — enables 3D perspective.
Transform
none | <length>
none
No
Vanishing point of the perspective property.
Transform
<position>
50% 50%
No
Whether the back face of an element is visible when turned toward the viewer.
Transform
visible | hidden
visible
No
Individual translate transform — independent of transform property.
Transform
none | <length-percentage>{1,2} <length>?
none
No
Individual rotate transform — independent of transform property.
Transform
none | <angle> | <axis-3d> <angle>
none
No
Individual scale transform — independent of transform property.
Transform
none | <number>{1,3}
none
No
Shorthand for all animation properties.
Animation
<name> <duration> <easing> <delay> <iteration> <direction> <fill-mode>
none 0s ease 0s 1 normal none
No
Name of the @keyframes rule describing the animation.
Animation
none | <keyframes-name>
none
No
Duration of one animation cycle.
Animation
<time>
0s
No
Timing function governing the animation's acceleration curve.
Animation
ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() | steps()
ease
No
Delay before the animation starts.
Animation
<time>
0s
No
Number of times the animation plays.
Animation
infinite | <number>
1
No
Whether the animation plays forward, backward, or alternates.
Animation
normal | reverse | alternate | alternate-reverse
normal
No
How the animation applies styles before and after it runs.
Animation
none | forwards | backwards | both
none
No
Whether the animation is running or paused.
Animation
running | paused
running
No
Shorthand for all transition properties.
Animation
<property> <duration> <easing> <delay>
all 0s ease 0s
No
CSS properties to which transitions are applied.
Animation
none | all | <custom-ident>
all
No
Duration of the transition.
Animation
<time>
0s
No
Timing function for the transition.
Animation
ease | linear | ease-in | ease-out | cubic-bezier() | steps()
ease
No
Delay before the transition starts.
Animation
<time>
0s
No
Applies graphical effects like blur, brightness, or color shifts.
Filter
none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()
none
No
Applies filter effects to the area behind the element.
Filter
none | blur() | brightness() | contrast() | …
none
No
Creates a new stacking context — useful with mix-blend-mode.
Filter
auto | isolate
auto
No
Mouse cursor to display when hovering the element.
Misc
auto | default | pointer | text | move | grab | not-allowed | …
auto
Yes
Whether an element can be the target of pointer events.
Misc
auto | none | visiblePainted | …
auto
Yes
Controls whether the user can select text.
Misc
auto | none | text | all | contain
auto
No
Whether an element is resizable by the user.
Misc
none | both | horizontal | vertical | block | inline
none
No
Generated content for ::before and ::after pseudo-elements.
Misc
normal | none | <string> | attr() | url() | counter() | …
normal
No
Shorthand for list-style-type, -position, and -image.
Misc
<list-style-type> <list-style-position> <list-style-image>
disc outside
Yes
Type of list marker for list items.
Misc
disc | circle | square | decimal | none | <string>
disc
Yes
Algorithm for table and cell layout. fixed is faster for large tables.
Misc
auto | fixed
auto
No
Whether adjacent table cell borders are collapsed or separated.
Misc
collapse | separate
separate
Yes
Space between cells when border-collapse: separate.
Misc
<length> <length>?
0
Yes
Position of a table caption.
Misc
top | bottom
top
Yes
Whether borders are shown for empty table cells.
Misc
show | hide
show
Yes
How a replaced element (img, video) fits its container.
Misc
fill | contain | cover | none | scale-down
fill
No
Alignment of replaced element within its box.
Misc
<position>
50% 50%
No
Hints to the browser that an element will change, enabling GPU compositing.
Misc
auto | <animateable-feature>
auto
No
Controls the native appearance of UI controls.
Misc
none | auto | <compat-auto>
auto
No
Scroll behavior when navigating to an anchor link.
Misc
auto | smooth
auto
No
Snap behavior of a scroll container.
Misc
none | x | y | block | inline | both [mandatory | proximity]
none
No
Alignment of scroll snap targets within the snap container.
Misc
none | start | end | center
none
No
Inherited: Yes — children inherit this value unless overridden.— click any property name to copy it