CSS Property Reference
A practical reference to CSS properties, their syntax, common values, and the details that cause real-world bugs. Each page is connected to working effects from the LibraryCSS catalog.
Examples are selected in real time from a catalog of 9,078 effects.
Visuals and effects22
background7917Defines an element's complete background in one declaration: color, image, gradient, position, size, repeat behavior, attachment, and clipping area.border-radius7272Rounds the corners of a box. Each corner can have its own horizontal and vertical radius.box-shadow4198Adds one or more shadows to an element's box. Use `inset` to draw a shadow inside the box.content2843Generates content for `::before` and `::after` pseudo-elements. The pseudo-element is not created unless `content` is specified, even when the value is empty.opacity2351Changes the transparency of an element and all of its descendants. Zero is fully transparent and one is fully opaque.filter2114Applies visual effects such as blur, brightness, hue rotation, and drop shadows. Multiple filter functions run in the written order.outline996Draws a non-layout-affecting line outside an element's border. It is the standard way to communicate keyboard focus.text-shadow646Adds one or more shadows to text. It powers glow, embossed, and layered 3D type effects.background-size623Controls the rendered size of a background image or gradient inside its element.background-position521Sets the position of a background image inside its element.clip-path512Clips an element to a geometric shape. The clipped area becomes invisible and no longer receives pointer events.background-clip425Defines how far an element's background is painted. The `text` value clips the background to the shape of the glyphs.-webkit-background-clip423The vendor-prefixed form of `background-clip`, still commonly included for reliable gradient text rendering.background-image411Places an image or gradient behind an element. Multiple comma-separated layers are allowed, and the first layer is painted on top.-webkit-text-fill-color247Sets the fill color of text independently from `color`. It is commonly used to make the fill transparent for gradient text.backdrop-filter88Applies filters to the content behind an element. It is the foundation of frosted-glass and glassmorphism interfaces.mix-blend-mode86Controls how an element blends with the content beneath it, similar to layer blend modes in image editors.-webkit-backdrop-filter45The vendor-prefixed form of `backdrop-filter`, needed by older Safari versions.mask41Masks an element using the alpha or luminance of an image or gradient. Unlike `clip-path`, a mask can create soft transitions.-webkit-mask39The vendor-prefixed form of `mask`, commonly written alongside the standard property for broader browser support.-webkit-text-stroke34Draws an outline around text glyphs. It is useful for hollow or outlined display type.isolation28Creates a new stacking context so descendants do not blend with content outside the component.Transforms and animation9
transform5623Moves, rotates, scales, or skews an element without changing normal document flow. It is one of the cheapest properties to animate.transition4812Interpolates between property values when they change. Most hover effects are simply transitions applied to a small set of properties.animation3494Applies a sequence defined by `@keyframes` and combines duration, timing, delay, iteration, direction, and fill behavior in one shorthand.transform-origin548Sets the point around which transforms are applied. The default origin is the center of the element.animation-delay333Sets how long an animation waits before starting. A negative delay starts the animation partway through its timeline.transform-style157Controls whether an element's children remain positioned in 3D space or are flattened into the parent's plane.perspective141Adds depth to a 3D scene. Smaller lengths create stronger perspective and larger lengths create a gentler view.animation-duration86Sets the length of one animation cycle.animation-direction58Controls the direction in which keyframes play on each animation cycle.Layout13
display4791Sets an element's outer box type and the layout model used for its children.position4582Controls how an element is positioned relative to normal document flow and its containing block.align-items2689Aligns items along the cross axis within a flex or grid container.overflow2059Controls what happens when content extends beyond an element's box.gap2008Sets the spacing between rows and columns in grid, flex, and multi-column layouts.justify-content1238Aligns items and distributes free space along the main axis of a flex or grid container.inset1058Writes the `top`, `right`, `bottom`, and `left` offsets in one shorthand declaration.z-index978Controls the paint order of overlapping elements. It participates in stacking contexts rather than creating one global page-wide number line.flex-direction356Sets the main axis and ordering direction of items in a flex container.place-items151Sets `align-items` and `justify-items` in one declaration.flex138Defines a flex item's grow factor, shrink factor, and basis in one shorthand.flex-wrap49Controls whether flex items stay on one line or wrap onto additional lines when space runs out.grid-template-columns49Defines the number and sizing of columns in a grid container.Typography11
color6295Sets the foreground text color and provides an inherited base color for borders and many visual effects.font-size5469Sets text size and supplies the base measurement used by `em`, line height, and other relative typography calculations.font-weight4703Sets the thickness of glyph strokes. Available results depend on the weights provided by the loaded font.font-family2820Chooses the font and lists fallback faces to try when earlier choices are unavailable.letter-spacing1252Adjusts the space between characters. Small changes can noticeably alter the density and tone of headings and labels.text-align703Controls the horizontal alignment of inline content within a block.white-space626Controls how spaces, wrapping, and source line breaks are handled inside an element.text-decoration549Adds underline, overline, or line-through decoration and can define its style, color, and thickness.font-style289Controls whether text uses an upright, italic, or oblique face. The browser may synthesize slant when the font lacks a real italic design.text-transform245Changes how letter case is displayed without modifying the source text.line-height164Sets the vertical distance occupied by each line of text.Box model7
width4877Sets an element's content width. Whether padding and borders are included depends on `box-sizing`.padding4666Sets the inner space between an element's content and its border.height4072Sets an element's content height. Percentage heights need a containing block with a definite height.border3402Draws a line around an element and defines its width, style, and color in one declaration.margin1664Sets the space outside an element. Vertical margins can collapse instead of adding together.min-width62Sets the smallest width an element is allowed to shrink to.box-sizing31Controls whether declared width and height include padding and border.Interaction5
cursor4848Sets the pointer shape shown when the user moves over an element.user-select907Controls whether and how the user can select text inside an element.pointer-events819Controls whether an element can become the target of pointer input such as mouse and touch events.-webkit-appearance90The vendor-prefixed form of `appearance`, needed by older WebKit browsers.appearance87Controls or removes the browser's platform-native styling for form controls.