CSS fill Property

The fill property fills a color of a SVG shape. The fill property can accept any CSS color value.

You can find web colors with our Color Picker tool and in the HTML colors section.

Initial Value black
Applies to All elements. It also applies to ::first-letter and ::first-line.
Inherited Yes.
Animatable Yes.
Version SVG 1.1
DOM Syntax object.style.Fill = "#8ebf42";

Syntax

fill: color | initial | inherit;

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      circle {
      fill: #1c87c9;
      }
    </style>
  </head>
  <body>
    <svg viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="50"/>
    </svg>
  </body>
</html>

Values

Value Description
color Indicates the color of the shape. Default color is the color of the element. Color names, hexadecimal color codes, rgb(), rgba(), hsl(), hsla() can be used. Fill property also accepts the patterns of SVG shapes that are define
initial Makes the property use its default value.
inherit Inherits the property from its parents element.

Browser support

? ? ? ? ? ?




Related articles