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 10,238 effects.
Visuals and effects22
background9048Defines an element's complete background in one declaration: color, image, gradient, position, size, repeat behavior, attachment, and clipping area.border-radius8359Rounds the corners of a box. Each corner can have its own horizontal and vertical radius.box-shadow4848Adds one or more shadows to an element's box. Use `inset` to draw a shadow inside the box.content3116Generates content for `::before` and `::after` pseudo-elements. The pseudo-element is not created unless `content` is specified, even when the value is empty.opacity2902Changes the transparency of an element and all of its descendants. Zero is fully transparent and one is fully opaque.filter2187Applies visual effects such as blur, brightness, hue rotation, and drop shadows. Multiple filter functions run in the written order.outline1103Draws a non-layout-affecting line outside an element's border. It is the standard way to communicate keyboard focus.background-size711Controls the rendered size of a background image or gradient inside its element.text-shadow694Adds one or more shadows to text. It powers glow, embossed, and layered 3D type effects.background-position608Sets the position of a background image inside its element.clip-path588Clips an element to a geometric shape. The clipped area becomes invisible and no longer receives pointer events.background-image546Places an image or gradient behind an element. Multiple comma-separated layers are allowed, and the first layer is painted on top.background-clip435Defines how far an element's background is painted. The `text` value clips the background to the shape of the glyphs.-webkit-background-clip433The vendor-prefixed form of `background-clip`, still commonly included for reliable gradient text rendering.-webkit-text-fill-color249Sets the fill color of text independently from `color`. It is commonly used to make the fill transparent for gradient text.backdrop-filter98Applies filters to the content behind an element. It is the foundation of frosted-glass and glassmorphism interfaces.mix-blend-mode93Controls how an element blends with the content beneath it, similar to layer blend modes in image editors.mask56Masks an element using the alpha or luminance of an image or gradient. Unlike `clip-path`, a mask can create soft transitions.-webkit-mask54The vendor-prefixed form of `mask`, commonly written alongside the standard property for broader browser support.-webkit-backdrop-filter47The vendor-prefixed form of `backdrop-filter`, needed by older Safari versions.-webkit-text-stroke36Draws an outline around text glyphs. It is useful for hollow or outlined display type.isolation32Creates a new stacking context so descendants do not blend with content outside the component.Transforms and animation9
transform6378Moves, rotates, scales, or skews an element without changing normal document flow. It is one of the cheapest properties to animate.transition5382Interpolates between property values when they change. Most hover effects are simply transitions applied to a small set of properties.animation4137Applies a sequence defined by `@keyframes` and combines duration, timing, delay, iteration, direction, and fill behavior in one shorthand.transform-origin660Sets the point around which transforms are applied. The default origin is the center of the element.animation-delay417Sets how long an animation waits before starting. A negative delay starts the animation partway through its timeline.perspective171Adds depth to a 3D scene. Smaller lengths create stronger perspective and larger lengths create a gentler view.transform-style164Controls whether an element's children remain positioned in 3D space or are flattened into the parent's plane.animation-duration95Sets the length of one animation cycle.animation-direction62Controls the direction in which keyframes play on each animation cycle.Layout13
display5857Sets an element's outer box type and the layout model used for its children.position5345Controls how an element is positioned relative to normal document flow and its containing block.align-items3383Aligns items along the cross axis within a flex or grid container.gap2745Sets the spacing between rows and columns in grid, flex, and multi-column layouts.overflow2607Controls what happens when content extends beyond an element's box.justify-content1545Aligns items and distributes free space along the main axis of a flex or grid container.inset1254Writes the `top`, `right`, `bottom`, and `left` offsets in one shorthand declaration.z-index1011Controls the paint order of overlapping elements. It participates in stacking contexts rather than creating one global page-wide number line.flex-direction765Sets the main axis and ordering direction of items in a flex container.flex519Defines a flex item's grow factor, shrink factor, and basis in one shorthand.place-items316Sets `align-items` and `justify-items` in one declaration.grid-template-columns78Defines the number and sizing of columns in a grid container.flex-wrap57Controls whether flex items stay on one line or wrap onto additional lines when space runs out.Typography11
color7403Sets the foreground text color and provides an inherited base color for borders and many visual effects.font-size6461Sets text size and supplies the base measurement used by `em`, line height, and other relative typography calculations.font-weight5169Sets the thickness of glyph strokes. Available results depend on the weights provided by the loaded font.font-family3805Chooses the font and lists fallback faces to try when earlier choices are unavailable.letter-spacing1977Adjusts the space between characters. Small changes can noticeably alter the density and tone of headings and labels.text-align984Controls the horizontal alignment of inline content within a block.white-space837Controls how spaces, wrapping, and source line breaks are handled inside an element.text-transform653Changes how letter case is displayed without modifying the source text.text-decoration575Adds underline, overline, or line-through decoration and can define its style, color, and thickness.line-height490Sets the vertical distance occupied by each line of text.font-style298Controls whether text uses an upright, italic, or oblique face. The browser may synthesize slant when the font lacks a real italic design.Box model7
width6015Sets an element's content width. Whether padding and borders are included depends on `box-sizing`.padding5703Sets the inner space between an element's content and its border.height5067Sets an element's content height. Percentage heights need a containing block with a definite height.border4124Draws a line around an element and defines its width, style, and color in one declaration.margin2119Sets the space outside an element. Vertical margins can collapse instead of adding together.box-sizing410Controls whether declared width and height include padding and border.min-width115Sets the smallest width an element is allowed to shrink to.Interaction5
cursor5386Sets the pointer shape shown when the user moves over an element.user-select965Controls whether and how the user can select text inside an element.pointer-events948Controls whether an element can become the target of pointer input such as mouse and touch events.-webkit-appearance196The vendor-prefixed form of `appearance`, needed by older WebKit browsers.appearance194Controls or removes the browser's platform-native styling for form controls.