Style tools

The Style tab lists every visual property of the selected element as a set of tools, grouped by topic. Each tool is a collapsible section; each property inside it is one row.

Layout

Part	Description
Rule selector	Dropdown at the top. Chooses what the tools edit: Style (the element’s effective style), Inline Style, or one matched CSS rule.
State button	Square button next to the rule selector. Forces a state such as `:hover`. See Element state.
Search box	Filters tools by tool name, group name, or CSS property. While a search is active, every matching tool is expanded.
Group heading	Small uppercase label above a set of related tools (Typography, Effects, …).
Tool header	Click to expand or collapse. A number badge shows how many of the tool’s properties are set on the current target. Open tools stay open when you switch elements.

Property row

Every property row has the same parts.

Part	Description
Label	Property name. Bold when the property is set. Hover to see the exact CSS property names.
Input	The control for the value. See Style controls.
⋯	Sets the property to a CSS-wide keyword: `inherit`, `initial`, `unset`, or `revert`. While a keyword is set, the input is replaced by a `keyword ×` button; click it to clear the keyword.
×	Removes the property. Disabled when the property isn’t set.
Source dot	Only on the Style target. Shows where the value comes from: the accent color for inline, green for a CSS rule, faded when the property isn’t set. Click to move the value to inline, another matching rule, or a new class. The rule list has its own search box.

Rows that edit several properties at once (box editors, the border tool) remove all of them with × and have no source dot.

Undo

Each committed change is one undo step. Dragging a slider, a color, a curve handle or a scrub handle is recorded as a single step for the whole drag.

Tools

Typography

Tool	Properties
Font family	`font-family` (suggestions include system stacks and common Google Fonts; a Google Font only renders if the page loads it — see Page settings)
Font size & weight	`font-size`, `font-weight`, `font-style`, `font-stretch`
Font color	`color`
Text spacing	`line-height`, `letter-spacing`, `word-spacing`
Text alignment	`text-align`, `text-align-last`, `vertical-align`, `text-indent`
Text decoration	`text-decoration-line` (underline, overline and line-through can be combined), `text-decoration-style`, `text-decoration-color`, `text-decoration-thickness`, `text-underline-offset`
Text transform	`text-transform`, `font-variant`, `font-variant-caps`
Text shadow	`text-shadow`, as a list of shadow layers
Text wrapping & overflow	`white-space`, `word-break`, `overflow-wrap`, `hyphens`, `text-overflow`, `-webkit-line-clamp`
Writing direction	`direction`, `writing-mode`, `unicode-bidi`
List style	`list-style-type`, `list-style-position`, `list-style-image`

Backgrounds & color

Tool	Properties
Background color	`background-color`
Background image & gradients	`background-image`, `background-size`, `background-position`, `background-repeat`, as a list of background layers. Each layer is an image URL or a gradient.
Background attachment & clip	`background-attachment`, `background-origin`, `background-clip`
Opacity	`opacity` (slider, 0–1)
Form colors	`accent-color`, `caret-color`

Box model & sizing

Tool	Properties
Margin	`margin-top`, `margin-right`, `margin-bottom`, `margin-left` (box editor)
Padding	`padding-top`, `padding-right`, `padding-bottom`, `padding-left` (box editor)
Size	`width`, `height`, `min-width`, `max-width`, `min-height`, `max-height`
Box sizing	`box-sizing`
Aspect ratio	`aspect-ratio` (presets such as `16 / 9`, or a custom value)

Borders & outlines

Tool	Properties
Border	`border-{top,right,bottom,left}-{width,style,color}`. Edit all sides at once (all) or one side (T, R, B, L).
Border radius	`border-top-left-radius`, `border-top-right-radius`, `border-bottom-right-radius`, `border-bottom-left-radius` (corner editor, with elliptical radii)
Outline	`outline-width`, `outline-style`, `outline-color`, `outline-offset`
Border image	`border-image-source`, `border-image-slice`, `border-image-width`, `border-image-repeat`

Layout & positioning

Tool	Properties
Display, flex & grid container	`display`; when the display is flex: `flex-direction`, `flex-wrap`, `justify-content`, `align-items`, `align-content`, `gap`; when it is grid: `grid-template-columns`, `grid-template-rows`, `grid-auto-flow`, `column-gap`, `row-gap`, `justify-items`
Position	`position`; `top`, `right`, `bottom`, `left` (box editor)
Z-index & layer	`z-index`, `isolation`
Float & clear	`float`, `clear`
Overflow	`overflow-x`, `overflow-y`, `overscroll-behavior`, `scroll-behavior`
Visibility	`visibility`

Flexbox item

Tool	Properties
Flex item	`flex-grow`, `flex-shrink`, `flex-basis`, `order`, `align-self`

Grid

Tool	Properties
Grid auto tracks	`grid-auto-columns`, `grid-auto-rows`
Grid areas	`grid-template-areas` (area table)
Grid alignment	`place-items`, `place-content`, `justify-content`, `align-content`
Grid item	`grid-column-start`, `grid-column-end`, `grid-row-start`, `grid-row-end`, `grid-area`, `justify-self`, `align-self`

Multi-column

Tool	Properties
Columns	`column-count`, `column-width`, `column-gap`, `column-rule-width`, `column-rule-style`, `column-rule-color`, `column-span`, `column-fill`

Effects

Tool	Properties
Box shadow	`box-shadow`, as a list of shadow layers (with spread and inset)
Filter	`filter`, as an ordered list of filter functions
Backdrop filter	`backdrop-filter`, as an ordered list of filter functions
Blend mode	`mix-blend-mode`, `background-blend-mode`
Clip path	`clip-path` (shape editor)
Mask	`mask-image`, `mask-size`, `mask-position`, `mask-repeat`

Filter functions: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia, drop-shadow, url.

Transforms

Tool	Properties
Transform	`transform`, as an ordered list of transform functions
Transform origin	`transform-origin` (position picker)
3D transform	`perspective`, `perspective-origin`, `transform-style`, `backface-visibility`

Transform functions: translate, translateX, translateY, translateZ, rotate, rotateX, rotateY, rotateZ, scale, scaleX, scaleY, skew, skewX, skewY, perspective, matrix, matrix3d.

Transitions & animations

Tool	Properties
Transition	`transition-property`, `transition-duration`, `transition-timing-function`, `transition-delay`, as one layer per transitioned property
Animation	`animation-name` (on the Style target, suggests `@keyframes` names found in the project’s stylesheets), `animation-duration`, `animation-timing-function`, `animation-delay`, `animation-iteration-count`, `animation-direction`, `animation-fill-mode`, `animation-play-state`

Interaction & UI

Tool	Properties
Cursor	`cursor`
Pointer & selection	`pointer-events`, `user-select`, `touch-action`
Resize	`resize`
Scroll snap	`scroll-snap-type`, `scroll-snap-align`, `scroll-padding-` (box editor), `scroll-margin-` (box editor)
Appearance	`appearance`

Media & images

Tool	Properties
Object fit	`object-fit`, `object-position`
Image rendering	`image-rendering`

Tables

Tool	Properties
Table style	`border-collapse`, `border-spacing`, `table-layout`, `caption-side`, `empty-cells`

Generated content

Tool	Properties
Content	`content`
Counters & quotes	`counter-reset`, `counter-increment`, `quotes`

Advanced

Tool	Properties
Container	`container-type`, `container-name`
Performance	`will-change`, `contain`, `content-visibility`
Raw CSS	Any property. Lists every property set on the target as an editable `property: value` line, with a line at the bottom to add a new property.

Values shown

On the Style target, each row shows the browser’s resolved value for properties that are set anywhere (inline or in a rule). Some resolved values look different from what was typed — for example a transform is shown as matrix(…). On Inline Style and rule targets, rows show the value exactly as written.

When several elements are selected, a row shows a value only if every selected element has the same one.

Classes panel Style controls