This is an important message requiring you to make a choice if you're based in the EU.

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";


fill: color | initial | inherit;


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


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