The gradient examples should use the background color of the inspected element.

Gradients are sometimes used in combination with background-size to create repeating patterns. It would be great to have support for this in the inspector - perhaps as a toggle option.

It's trying to assign a plain ID to a pseudo element, then reference that ID in a CSS rule. This makes sense for normal elements, but ::before and ::after pseudo elements will need extra logic to support the toggle.

I would like to change the background color of the gradient examples.

I would like to be able to reorder the gradients in the inspector.

I would like to see the HEX value of the colors for each gradient.

I would like to be able to copy the whole CSS definition for the gradients.

When there's only one gradient applied to the element and the checkbox is unselected the gradient is not being removed from the element.

I would like to not have any styles injected inline in the inspected element. When I select/unselect the gradients to be displayed it should override the original definition.

Possible solutions:

• Save the original definition for the element style in the localStorage and then modify the original CSS definition.
• Create a high priority CSS definition and modify it when user change the gradients.

I would like to be able to change the colors of the gradient using a color picker.

Nice work on this!

Would you mind submitting your extension to https://addons.opera.com/en/? It should be compatible so it’s just a matter of uploading the same package to our catalog as well —no code changes needed. That way, Opera users can benefit from your work as well.

Thanks in advance for considering this.

This is a super-useful extension. Do you have plans to publish it to CWS? :)

Gradient Inspector delegates to Gradient Parser for getting gradient values, but Gradient Parser only handles gradient values.

If I have an element with multiple backgrounds, and one of them is a non-gradient image, Gradient Inspector fails to render the backgrounds due to an error thrown by Gradient Parser.

Example in code form:

.this-works {
  background-image: linear-gradient(...), linear-gradient(...);
}

.this-breaks {
  background-image: url(http://...), linear-gradient(...);
}