Style controls
The style tools share a small set of inputs. This page describes how each one reads and writes values.
Value input
Used for lengths, times, angles and plain numbers (width, font-size, transition-duration, …).
| Part | Behavior |
|---|---|
| ⋮ grip | Drag left or right to change the number. Hold Shift for steps ×10, Alt for steps ÷10. |
| Number field | Type a number, a number with a unit (2rem), a keyword, or an expression: calc(), clamp(), min(), max(), var(). Plain numbers apply as you type; anything else applies on Enter or when the field loses focus. |
| ↑ / ↓ | Nudge the number by one step. Shift and Alt work as for the grip. |
| Unit menu | Picks the unit, or a keyword such as auto. Choosing a keyword hides the number field. Shows fx while the value is an expression and – for a unitless number. |
A bare number keeps the unit currently selected. A unit the property doesn’t usually take still shows if the value uses it.
Number input
Unitless numbers (z-index, order, flex-grow, column-count, …). Same grip and arrow keys as the value input. Some fields also accept keywords, offered as suggestions (auto, infinite, none). Invalid text is rejected and the previous value comes back.
Slider
Bounded values such as opacity. Drag the slider or type in the field next to it.
Dropdowns and toggle buttons
- Dropdown — pick a value. Dropdowns marked custom have a custom… entry that switches to a text field; values that aren’t in the list are shown in that text field, with a ▾ button to go back to the presets.
- Toggle buttons — click to set, click the active one again to clear.
text-decoration-lineallows several at once.
Text field
Free text (font-family, grid-area, content, …). Applies on Enter or when the field loses focus; Escape restores the current value. Some fields offer suggestions as you type.
Color picker
Click the swatch to open the picker. The swatch shows a checkerboard behind transparent colors, and the variable name when the value is a CSS variable.
| Part | Behavior |
|---|---|
| Saturation/brightness area | Drag to pick. |
| Hue slider | Drag to pick the hue. |
| Alpha slider | Drag to set transparency. |
| hex / rgb / hsl | Output format. Colors with transparency are written as #rrggbbaa, rgba() or hsla(). |
| Text field | Accepts any CSS color, including named colors (tomato) and var(--name). Named colors are kept as typed. |
| ⌖ | Picks a color from anywhere on the screen. Shown only in browsers that support it (Chrome, Edge). |
| Swatches | Click to apply. + saves the current color. Right-click a swatch to delete it. Swatches are kept in this browser only. |
| Variables | Lists the --custom-properties declared in the project’s stylesheets. Click one to apply it as var(--name). Shown on the Style target. |
Box editor
Used by Margin, Padding, Position (inset) and Scroll snap. Four value inputs arranged around a box, one per side. The button in the middle switches between all (one edit sets every side) and each (sides are independent).
Corner editor
Used by Border radius.
| Control | Behavior |
|---|---|
| linked / per corner | Edit all four corners together or one at a time. |
| elliptical | Adds a second input per corner for the vertical radius (10px 20px). |
Position picker
Used for background-position, object-position, transform-origin, perspective-origin and mask-position. A 3×3 grid of dots sets the nine keyword positions (left top … right bottom); the X and Y inputs take any length, percentage or keyword.
Layer list
Used for multi-layer values: shadows, background layers, filters, transforms and transitions.
| Control | Behavior |
|---|---|
| Layer row | Shows a one-line summary. Click to expand its editor. |
| ↑ / ↓ | Reorder. The first background layer is drawn on top; filters and transforms apply in list order. |
| × | Delete the layer. |
| + Add … | Add a layer with default values. |
Gradient editor
Used inside a background layer set to gradient.
| Control | Behavior |
|---|---|
| linear / radial / conic | Gradient type. |
| ↻ | Repeating gradient. |
| Angle / from | Direction for linear, start angle for conic. Keywords such as to right are converted to angles. |
| ellipse / circle | Shape for radial. |
| Stop bar | Click to add a stop. Drag a diamond to move it. |
| Selected stop | Color, position (%) and × to delete. A gradient keeps at least two stops. |
Easing editor
Used for transition-timing-function and animation-timing-function.
| Control | Behavior |
|---|---|
| Preset dropdown | linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end, two overshoot curves and steps(4, end); custom… for any value. |
| Curve | For keyword and cubic-bezier() values, drag the two handles. Dragging a keyword curve converts it to cubic-bezier(). Handles can go above and below the box for overshoot. |
| Steps | For steps() values: number of steps and position (end, start, jump-none, jump-both). |
Clip-path editor
| Control | Behavior |
|---|---|
| Shape preset | none, inset, circle, ellipse, triangle, rhombus, pentagon, hexagon, star, arrow. |
| Canvas | Drag handles: polygon points, circle and ellipse center and radii, inset edges. For polygons, click empty space to add a point and Alt-click a point to remove it (minimum three). |
| Text field | The raw value. Shapes that use units other than percentages can only be edited here. |
Grid area editor
Used for grid-template-areas. A table of cells; type an area name into each cell, or leave it empty for .. Cells with the same name share a color. rows +/− and cols +/− add or remove the last row or column.
Related
- Reference: Style tools
- How-to: Add a gradient background