The fill CSS property is used to specify the color or gradient used to fill the interior of a graphical shape or SVG element. It is commonly used in conjunction with SVG (Scalable Vector Graphics) to control the appearance of vector-based graphics.
Here’s an example of how to use the fill property:
.circle {
fill: blue;
}
In this example, the fill property is applied to an SVG <circle> element with the class name .circle. The value blue is used to set the fill color of the circle to blue.
The fill property can accept various values:
- Color values: You can specify a color using a color name, hexadecimal value, RGB value, or HSL value.
- Gradient values: You can use linear or radial gradients to create more complex fill effects. This involves defining the gradient using the
linear-gradient()orradial-gradient()functions.
It’s important to note that the fill property applies only to SVG elements or certain graphical shapes. It does not have any effect on regular HTML elements.
Additionally, the fill property can be animated and transitioned using CSS animations and transitions, allowing you to create dynamic and interactive effects with SVG graphics.
In summary, the fill CSS property is used to specify the color or gradient used to fill the interior of an SVG element or graphical shape. It allows you to control the visual appearance of vector-based graphics.