CSS fill Property

The fill property is used for setting the color of an SVG shape. It accepts any color value.

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

Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Adding a height to a multi-column element, will give you the opportunity to decide how to fill the columns with the content. The content may be filled or balanced successively.

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 of the fill property:

<!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>

Try it Yourself »

Result

Example of the fill property with the "color" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .opacity1 {
        fill: red;
      }
      .opacity2 {
        fill: #228B22;
      }
      .opacity3 {
        fill: rgb(255, 165, 0);
      }
      .opacity4 {
        fill: hsl(248, 53%, 58%)
      }
    </style>
  </head>
  <body>
    <h3>CSS | fill</h3>
    <div class="contnerai">
      <svg viewBox="0 0 800 800">
        <circle class="opacity1" cx="150" cy="150" r="50" />
        <circle class="opacity2" cx="300" cy="150" r="50" />
        <circle class="opacity3" cx="450" cy="150" r="50" />
        <circle class="opacity4" cx="600" cy="150" r="50" />
      </svg>
    </div>
  </body>
</html>

Try it Yourself »

Example of the fill property with patterns:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .opacity-one {
        fill: url(#pattern-one);
      }
      .opacity-two {
        fill: url(#pattern-two);
      }
    </style>
  </head>
  <body>
    <h3> Fill </h3>
    <div class="container">
      <svg viewBox="0 0 800 800">
        <defs>
          <pattern id="pattern-one" viewBox="0, 0, 11, 11" width="15%" height="15%">
            <circle r="10" fill="green" />
          </pattern>
          <pattern id="pattern-two" viewBox="0, 0, 9, 9" width="15%" height="15%">
            <rect height="4" width="4" fill="red" />
          </pattern>
        </defs>
        <circle class="opacity-one" cx="150" cy="150" r="55" />
        <circle class="opacity-two" cx="300" cy="150" r="55" />
      </svg>
    </div>
  </body>
</html>

Try it Yourself »

SVG and the fill property

Due to the fill property SVG is more flexible than standard image files. For example, standard image files, like JPG, GIF or PNG, will require two versions of icons - each one for each color scheme. But when using SVG, we can paint the icons using this property and without having to do the presented above. You can do this using the code below:

.icon {
  fill: pink;
}

.icon-secondary {
  fill: yellow;
}

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.