CSS features reference
Published on
Discover new workflows in this comprehensive reference of Chrome DevTools features related to viewing and changing CSS.
See Get Started with Viewing and Changing CSS to learn the basics.
Select an element
The Elements panel of DevTools lets you view or change the CSS of one element at a time. The selected element is highlighted blue in the DOM Tree. The element's styles are shown in the Styles pane. See View an element's CSS for a tutorial.

Figure 1. The h1
element that's highlighted blue in the DOM Tree is the selected element. To the right, the element's styles are shown in the Styles pane. To the left, the element is highlighted in the viewport, but only because the mouse is currently hovering over it in the DOM Tree
There are many ways to select an element:
- In your viewport, right-click the element and select Inspect.
- In DevTools, click Select an element
or press Command+Shift+C (Mac) or Control+Shift+C (Windows, Linux), and then click the element in the viewport.
- In DevTools, click the element in the DOM Tree.
- In DevTools, run a query like
document.querySelector('p')
in the Console, right-click the result, and then select Reveal in Elements panel.
View CSS
View the external stylesheet where a rule is defined
In the Styles pane, click the link next to a CSS rule to open the external stylesheet that defines the rule.
If the stylesheet is minified, see Make a minified file readable.
Figure 2. Clicking devsite-google-blue.css:487
takes you to line 487 of devsite-google-blue.css
, where the .devsite-article h1:first-of-type
CSS rule is defined.
View only the CSS that's actually applied to an element
The Styles tab shows you all of the rules that apply to an element, including declarations that have been overridden. When you're not interested in overridden declarations, use the Computed tab to view only the CSS that's actually being applied to an element.
- Select an element.
- Go to the Computed tab in the Elements panel.
Note: On a wide DevTools window, the Computed tab does not exist. The contents of the Computed tab are shown on the Styles tab.
Inherited properties are opaque. Check the Show All checkbox to see all inherited values.
Figure 3. The Computed tab shows the CSS properties being applied to the currently-selected h1
element
View CSS properties in alphabetical order
Use the Computed tab. See View only the CSS that's actually applied to an element.
View inherited CSS properties
Check the Show All checkbox in the Computed tab. See View only the CSS that's actually applied to an element.
Alternatively, scroll down the Styles pane and find sections named Inherited from <element_name>
.

@supports
at-rules
View The Styles tab shows you the @supports
CSS at-rules if they are applied to an element. For example, inspect the following element:

If your browser supports the lab()
function, the element is green, otherwise it's purple.
Note: At the time of writing, only Safari supports the CIELAB color space.
View an element's box model
To view the box model of an element, go to the Styles tab. If your DevTools window is narrow, the Box Model diagram is at the bottom of the tab.
To change a value, double-click on it.

Figure 4. The Box Model diagram in the Styles tab shows the box model for the currently selected h1
element
Search and filter an element's CSS
Use the Filter text box on the Styles and Computed tabs to search for specific CSS properties or values.
To also search inherited properties in the Computed tab, check the Show All checkbox.

Figure 5. Filtering the Styles tab to only show rules that include the search query color

Figure 6. Filtering the Computed tab to only show declarations that include the search query 100%
Toggle a pseudo-class
To toggle a pseudo-class like :active
, :focus
, :hover
, :visited
, :focus-within
or focus-visible
:
- Select an element.
- On the Elements panel, go to the Styles tab.
- Click :hov.
- Check the pseudo-class that you want to enable.

Figure 7. Toggling the :hover
pseudo-class. In the viewport you can see that the background-color: cornflowerblue
declaration is being applied to the element, even though the element is not actually being hovered over
See Add a pseudostate to a class for an interactive tutorial.
View inherited highlight pseudo-elements
Pseudo-elements let you style specific parts of elements. Highlight pseudo-elements are document portions with a "selected" status and they are styled as "highlighted" to indicate this status to the user. For example, such pseudo-elements are ::selection
, ::spelling-error
, ::grammar-error
, and ::highlight
.
As mentioned in the specification, when multiple styles conflict, cascade determines the winning style.
To enable this feature, run Chrome with the --enable-blink-features=HighlightInheritance
flag.
To better understand the inheritance and priority of the rules, you can view the inherited highlight pseudo-elements:
- I inherited the style of my parent's highlight pseudo-element. Select me!
Select a portion of the text above.
In the Styles pane, scroll down to find the
Inherited from ::selection pseudo of...
section.

View cascade layers
Cascade layers enable more explicit control of your CSS files to prevent style-specificity conflicts. This is useful for large codebases, design systems, and when managing third-party styles in applications.
To view cascade layers, inspect the element below and open Elements > Styles.
In the Styles pane, view the 3 cascade layers and their styles: page
, component
and base
.

To view the layer order, click the layer name or the Toggle CSS layers view
button.The page
layer has the highest specificity, therefore the element's background is green.
View a page in print mode
To view a page in print mode:
- Open the Command Menu.
- Start typing
Rendering
and selectShow Rendering
. - For the Emulate CSS Media dropdown, select print.
View used and unused CSS with the Coverage tab
The Coverage tab shows you what CSS a page actually uses.
Press Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux, ChromeOS) while DevTools is in focus to open the Command Menu.
Start typing
coverage
and select Show Coverage. The Coverage tab appears.Figure 8. Opening the Coverage tab from the Command Menu
Figure 9. The Coverage tab
Click Start Instrumenting Coverage And Reload Page
. The page reloads and the Coverage tab provides an overview of how much CSS (and JavaScript) is used from each file that the browser loads. Green represents used CSS. Red represents unused CSS.
Figure 10. An overview of how much CSS (and JavaScript) is used and unused
Click a CSS file to see a line-by-line breakdown of what CSS it uses.
Figure 11. Lines 55 to 57 and 65 to 67 of
devsite-google-blue.css
are unused, whereas lines 59 to 63 are used
Force print preview mode
See Force DevTools Into Print Preview Mode.
Change CSS
Add a CSS declaration to an element
Since the order of declarations affects how an element is styled, you can add declarations in different ways:
- Add a inline declaration. Equivalent to adding a
style
attribute to the element's HTML. - Add a declaration to a style rule.
What workflow should you use? For most scenarios, you probably want to use the inline declaration workflow. Inline declarations have higher specificity than external ones, so the inline workflow ensures that the changes take effect in the element as you'd expect. See Selector Types for more on specificity.
If you're debugging an element's styles and you need to specifically test what happens when a declaration is defined in different places, use the other workflow.
Add an inline declaration
To add an inline declaration:
- Select an element.
- In the Styles pane, click between the brackets of the element.style section. The cursor focuses, allowing you to enter text.
- Enter a property name and press Enter.
- Enter a valid value for that property and press Enter. In the DOM Tree, you can see that a
style
attribute has been added to the element.

Figure 12. The margin-top
and background-color
properties have been applied to the selected element. In the DOM Tree you can see the declarations reflected in the element's style
attribute
Add a declaration to a style rule
To add a declaration to an existing style rule:
- Select an element.
- In the Styles pane, click between the brackets of the style rule to which you want to add the declaration. The cursor focuses, allowing you to enter text.
- Enter a property name and press Enter.
- Enter a valid value for that property and press Enter.

Figure 13. Adding the border-bottom-style:groove
declaration to a style rule
Change a declaration name or value
Double-click a declaration's name or value to change it. See Change declaration values with keyboard shortcuts for shortcuts for quickly incrementing or decrementing a value by 0.1, 1, 10, or 100 units.
Change declaration values with keyboard shortcuts
While editing the value of a declaration, you can use the following keyboard shortcuts to increment the value by a fixed amount:
- Option+Up (Mac) or Alt+Up (Windows, Linux) to increment by 0.1.
- Up to change the value by 1, or by 0.1 if the current value is between -1 and 1.
- Shift+Up to increment by 10.
- Shift+Command+Up (Mac) or Control+Shift+Page Up (Windows, Linux) to increment the value by 100.
Decrementing also works. Just replace each instance of Up mentioned above with Down.
Add a class to an element
To add a class to an element:
- Select the element in the DOM Tree.
- Click .cls.
- Enter the name of the class in the Add New Class text box.
- Press Enter.
Figure 14. The Element Classes pane
Emulate light and dark theme preferences and enable automatic dark mode
To toggle automatic dark mode or emulate the user's preference of light or dark themes:
On the Elements > Styles pane, click
Toggle common rendering emulations.
Select one of the following from the drop-down list:
- prefers-color-scheme: light. Indicates that the user prefers the light theme.
- prefers-color-scheme: dark. Indicates that the user prefers the dark theme.
- Automatic dark mode. Displays your page in dark mode even if you didn't implement it. Additionally, sets
prefers-color-scheme
todark
automatically.
This drop-down is a shortcut for Emulate CSS media feature prefers-color-scheme
and Enable automatic dark mode options of the Rendering tab.
Toggle a class
To enable or disable a class on an element:
- Select the element in the DOM Tree.
- Open the Element Classes pane. See Add a class to an element. Below the Add New Class text box are all of the classes that are being applied to this element.
- Toggle the checkbox next to the class that you want to enable or disable.
Add a style rule
To add a new style rule:
- Select an element.
- Click New Style Rule
. DevTools inserts a new rule beneath the element.style rule.

Figure 15. DevTools adds the h1.devsite-page-title
style rule after clicking New Style Rule
Choose which stylesheet to add a rule to
When adding a new style rule, click and hold New Style Rule to choose which stylesheet to add the style rule to.

Figure 16. Choosing a stylesheet
Toggle a declaration
To toggle a single declaration on or off:
- Select an element.
- In the Styles pane, hover over the rule that defines the declaration. Checkboxes appear next to each declaration.
- Check or uncheck the checkbox next to the declaration. When you uncheck a declaration, DevTools crosses it out to indicate that it's no longer active.

Figure 20. The color
property for the currently-selected element has been toggled off
Change colors with the Color Picker
The Color Picker provides a GUI for changing color
and background-color
declarations.
To open the Color Picker:
In the Styles tab, find the
color
orbackground-color
declaration that you want to change. To the left of thecolor
orbackground-color
value, there is a small square which is a preview of the color.Figure 24. The small blue square to the left of
rgb(123, 170, 247)
is a preview of that colorClick the preview to open the Color Picker.
Figure 25. The Color Picker
Here's a description of each of the UI elements of the Color Picker:
Figure 26. The Color Picker, annotated
Shades.
Eyedropper. See Sample a color off the page with the Eyedropper.
Copy To Clipboard. Copy the Display Value to your clipboard.
Display Value. The RGBA, HSLA, HWBA, or Hex representation of the color.
Color Palette. Click one of these squares to change the color to that square.
Hue.
Opacity.
Display Value Switcher. Toggle between the RGBA, HSLA, HWBA, and Hex representations of the current color.
Note: Alternatively, to toggle between color representations, hold down Shift and click on the color preview button.
Color Palette Switcher. Toggle between the Material Design palette, a custom palette, or a page colors palette. DevTools generates the page color palette based on the colors that it finds in your stylesheets.
Sample a color (anywhere) with the Eyedropper
When you open the Color Picker, the Eyedropper is on by default.
The Eyedropper can sample colors both from the page and, with a corresponding experiment enabled, from anywhere on the screen:
Pick a color from the page:
Hover over the target color in the viewport.
Click to confirm.
The Color Picker shows a current color value of
#212121
, which is close to black. This color changes to the blue that's highlighted in the viewport once you click the blue.(Experimental) Pick a color from anywhere on the screen:
To enable this experimental feature, check Enable color picking outside the browser window under
Settings > Experiments and reload DevTools.
Hover over the target color on your screen.
Click to confirm.
The Color Picker shows a current color value of
rgb(224 255 255 / 15%)
. This color changes to the pink from outside the browser window once you click the pink.
Change angle value with the Angle Clock
The Angle Clock provides a GUI for changing <angle>
s in CSS property values.
To open the Angle Clock:
Select an element with angle declaration. For example, select the text below.
In the Styles tab, find the
transform
orbackground
declaration that you want to change. Click on the Angle Preview box next to the angle value.Figure 28. The small clock to the left of
-5deg
and0.25turn
are preview of the angle.Click the preview to open the Angle Clock.
Figure 29. The Angle Clock.
Change the angle value by clicking on the Angle Clock circle or scroll your mouse to increase / decrease the angle value by 1.
There are more keyboard shortcuts to change the angle value. Find out more in the Styles pane keyboard shortcuts.
Change box and text shadows with the Shadow Editor
The Shadow Editor provides a GUI for changing text-shadow
and box-shadow
CSS declarations.
To open the Shadow Editor:
Select an element with a shadow declaration. For example, select the element below.
In the Styles tab, find a shadow icon next to the
text-shadow
orbox-shadow
declaration.Figure 29. The shadow icon to the left of the
text-shadow
andbox-shadow
values.Click the shadow icon to open the Shadow editor.
Change the shadow properties:
- Type (only for
box-shadow
). Pick Outset or Inset. - X and Y offsets. Drag the blue dot or specify values.
- Blur. Drag the slider or specify a value.
- Spread (only for
box-shadow
). Drag the slider or specify a value.
- Type (only for
Observe the changes applied to the element.
(Experimental) Copy CSS changes
To enable this experimental feature, check Sync CSS changes in the Styles pane under Settings > Experiments and reload DevTools.
With this experiment enabled, the Styles pane highlights your CSS changes in green.
To copy a single CSS declaration change, hover over the highlighted declaration and click the Copy button.

To copy all CSS changes across declarations at once, right-click on any declaration and select Copy all CSS changes.

Additionally, you can track changes you make with the Changes tab.
Last updated: • Improve article