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.

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>

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>

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>

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.

Browser support

? ? ? ? ?


Related Resources

Do you find this helpful?

Related articles