CSS fill Property

CSS fill Property

The fill property in CSS defines the color of SVG elements. It is mainly used for vector graphics and icons that are created using SVG (Scalable Vector Graphics).

1. Syntax

selector {
  fill: color | none | currentColor;
}

Value	Description
color	Sets a specific color (e.g., red, #ff0000, rgb(255, 0, 0)).
none	Removes the fill color, making the SVG shape transparent.
currentColor	Uses the current text color (color property).

2. Example – Basic SVG Fill

svg {
  width: 100px;
  height: 100px;
}

.shape {
  fill: blue;
}

✅ The circle fills with blue color.

3. Example – Using fill: none

.shape {
  fill: none;
  stroke: black;
  stroke-width: 3;
}

✅ The shape has no fill but a black outline.

4. Example – Using currentColor

.icon {
  fill: currentColor;
  color: red;
}

✅ The fill color follows the text color (in this case, red).

5. Example – Hover Effect

.icon:hover {
  fill: green;
}

✅ The SVG color changes on hover.

6. Important Notes

• fill only works with SVG elements, not regular HTML elements.
• For text color, use color, not fill.
• If using inline SVG, you can override the fill in CSS.

7. Best Practices

✔ Use fill: currentColor; for icons that inherit text color.
✔ Use fill: none; with stroke for outlined shapes.
✔ Use fill in CSS to override inline SVG styles.