CSS | fill Property

The fill property is a presentation attribute used to set the color of a SVG shape.

Syntax:

fill: <paint>

Property Values:



  • paint: It is used to set the color of the fill property. This paint be defined using color names, hex, rgb or hsl values. The default value is black. It can also be used with patterns using the url() function.

    Example 1: This example illustrates the different color values of fill property.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
      <title>
        CSS | fill Property
      </title>
      <style>
        .opacity1 {
          /* using color names */
          fill: green;
        }
      
        .opacity2 {
          /* using hex values */
          fill: #ff0000;
        }
      
        .opacity3 {
          /* using rgb values */
          fill: rgb(0, 0, 128);
        }
      
        .opacity4 {
          /* using hsl values */
          fill: hsl(24, 100%, 60%);
        }
      </style>
    </head>
    <body>
      <h1 style="color: green">
        GeeksforGeeks
      </h1>
      <b>CSS | fill</b>
      <div class="container">
        <svg height="250px" width="600px"
          xmlns="http://www.w3.org/2000/svg"
          version="1.1">
          <circle class="opacity1" cx="100"
            cy="100" r="50" />
          <circle class="opacity2" cx="250"
            cy="100" r="50" />
          <circle class="opacity3" cx="400"
            cy="100" r="50" />
          <circle class="opacity4" cx="550"
            cy="100" r="50" />
        </svg>
      </div>
    </body>
    </html>

    chevron_right

    
    

    Output:
    fill-color

    Example 2: This example uses patterns for fill property.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
      <title>
        CSS | fill property
      </title>
      <style>
        .opacity1 {
          fill: url(#pattern1);
        }
      
        .opacity2 {
          fill: url(#pattern2);
        }
      </style>
    </head>
    <body>
      <h1 style="color: green">
        GeeksforGeeks
      </h1>
      <b>
        CSS | fill
      </b>
      <div class="container">
        <svg height="250px" width="600px"
          xmlns="http://www.w3.org/2000/svg"
          version="1.1">
          <defs>
            <pattern id="pattern1"
              viewBox="0, 0, 10, 10"
              width="10%" height="10%">
              <circle r="10" />
            </pattern>
            <pattern id="pattern2" 
              viewBox="0, 0, 10, 10"
              width="10%" height="10%">
              <rect height="5" width="5"
                fill="green" />
            </pattern>
          </defs>
      
          <circle class="opacity1" cx="100"
            cy="100" r="50" />
          <circle class="opacity2" cx="250"
            cy="100" r="50" />
        </svg>
      </div>
    </body>
    </html>

    chevron_right

    
    

    Output:
    fill-pattern

Supported Browsers: The browsers supported by fill property are listed below:

  • Chrome
  • Firefox
  • Safari
  • Opera
  • Internet Explorer 9


My Personal Notes arrow_drop_up

Maybe this silence is dangerous

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.