Explore variable font axes (weight, width, slant, optical size) with live sliders and CSS output.
Variable Font Playground loads a variable font and gives you one slider per design axis - weight, width, slant, optical size, plus any custom axes the face ships - spanning the axis's minimum to maximum. The sample text re-renders on every drag, because the browser interpolates the font's design masters in real time. When you like the look, the CSS panel shows the declaration that reproduces it, ready to copy. What most people get wrong: axes are per-font. A width slider at maximum means different things on different fonts, and a font without a slant axis has no slant to give.
A concrete input and expected output from the current implementation.
Input
Weight slider set to 700, width slider set to 110, on a font whose wght axis spans 100 to 1000 and wdth spans 25 to 151 (the ranges of Roboto Flex, the usual test face for these playgrounds).
Expected output
The sample text redraws at the heavier, wider instance, and the CSS panel shows: font-variation-settings: "wght" 700, "wdth" 110;
The tool writes the slider positions as raw axis values on the font's four-letter axis tags, the format the CSS spec defines for direct axis control. The wdth value is in axis units, not percent: 110 here is the same point font-stretch: 110% would select, and the preview shows the real interpolated outlines, not a scaled fake.
A variable font declares its axes in its fvar table: each axis has a four-letter tag and a minimum, default, and maximum. The tool reads the loaded face's axes and builds one slider per axis, starting at the defaults. Because the browser interpolates between the font's design masters, every slider position renders genuine outlines at that weight or width rather than a synthesized approximation.
The panel emits one font-variation-settings declaration listing the four-letter axis tags you touched, for example "wght" 700, "wdth" 110. The named properties map onto the same axes - font-weight to wght, font-stretch to wdth, font-style: oblique to slnt, font-optical-sizing: auto to opsz - but variation settings are the one uniform form that reaches every axis, including a font's custom ones, and they override the named properties wherever both are set.
Both reach the same axis. The named properties are conveniences the browser maps onto the axes - font-weight sets wght, font-stretch sets wdth, and so on - while font-variation-settings is the direct form. Use it when you combine several axes in one declaration or touch a custom axis, and know it overrides the named properties when both are present.
Not meaningfully. Each font defines its own axis set and ranges, so wdth 110 widens one face subtly and sits outside another's range entirely; fonts with only a weight axis ignore width settings. Always copy the font-family name together with the settings, and re-check the sliders after swapping fonts.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.
Preview how screen colors translate to print with CMYK simulation and proofing.
Preview any Google Font at various sizes, weights, and with custom sample text.
Create linear, radial, and conic CSS gradients with a visual editor and code output.
Generate harmonious color palettes from a base color using color theory rules.
Simulate how colors appear to people with various types of color vision deficiency.