View computed styles using the CSS panel

View a list of CSS properties for the selected element by opening the CSS panel and switching to the Computed tab. You can only see the computed style when a single element is selected.

Computed pane of CSS panel

If a property is set by a rule, an arrow displays next to the property name. Click the property to view the rule and the value that the rule specifies.

  • If multiple rules affect the same property, you see the dominant rule.
  • If you want to change the property, click the rule selector name to switch to the Styles tab and jump directly to that rule, where you can edit it. You can't edit CSS in the Computed tab.

Filtering

You can filter the list of properties that you see in the CSS panel.

Predefined filters

Select a predefined filter from the dropdown:

  • All - See all properties, including properties set to default values.
  • Summary - See properties explicitly defined by matching rules. (This is the default view.)
  • Font - See font-related properties.
  • Background - See background-related properties.

Custom filter

To apply your own filter, click the magnifying glass icon Search icon and type part of a property name in the Filter properties field. The custom filter works in addition to the active predefined filter, so you should select All to apply your custom filter to all properties.

Was this helpful?
How can we improve it?

Need more help?

Sign in for additional support options to quickly solve your issue