How to Work with Fill & Stroke Color in CSS ?

Last Updated : 18 Mar, 2024

Fill color is the interior color of an element and the Stroke Color is the color that is applied to the outline of the element. we will work with this fill and stroke color in CSS on various SVG shapes.

These are the following approaches:

Table of Content

Using Different Fill and Stroke Colors on SVG Shapes
Using Dynamic fill and stroke colors

Using Different Fill and Stroke Colors on SVG Shapes

In this example, different fill and stroke colors are applied to SVG shapes (circle, triangle, rectangle) using CSS classes .circle, .triangle, and .rectangle, along with stroke widths for each shape.

Syntax:

.shape {
     fill: color
     stroke: color
}
<svg>
      shape
 </svg>

Example: Below is the usage of fill and stroke color in CSS on SVG Shapes.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
                                   initial-scale=1.0">
    <title>Example 1</title>
    <style>
        .circle {
            fill: #FF5733;
            stroke: #3366FF;
            stroke-width: 3px;
        }

        .triangle {
            fill: #7FFF00;
            stroke: #FF6347;
            stroke-width: 4px;
        }

        .rectangle {
            fill: #4169E1;
            stroke: #FFD700;
            stroke-width: 5px;
        }

        .shape-row {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <h1 style="text-align: center;">
        Using Different Fill and Stroke
      Colors on SVG Shapes
    </h1>
    <div class="shape-row">
        <svg width="160" height="160">
            <circle cx="50" cy="50" 
                    r="30" 
                    class="circle"></circle>
        </svg>
        <svg width="160" height="160">
            <polygon points="50,10 85,90 15,90" 
                     class="triangle"></polygon>
        </svg>
        <svg width="160" height="160">
            <rect x="10" y="10" width="80" 
                  height="80" 
                  class="rectangle"></rect>
        </svg>
    </div>
</body>

</html>

Output:

Screenshot-2024-03-15-at-19-50-25-Example-1

Using Dynamic fill and stroke colors

In this example, dynamic fill and stroke colors are applied to an SVG circle using CSS variables. JavaScript functions are used to update these colors based on user input from color pickers.

Syntax:

svg {
    fill: let(--custom-fill);
    stroke: let(--custom-stroke);
}

Example: Below is the usage of Dynamic fill and stroke colors in CSS on SVG Shape.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
                                   initial-scale=1.0">
    <title>Example 2</title>
    <style>
        :root {
            --custom-fill: #FF5733;
            --custom-stroke: #3498db;
        }

        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
        }

        .container {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
        }

        svg {
            width: 200px;
            height: 200px;
            fill: var(--custom-fill);
            stroke: var(--custom-stroke);
            stroke-width: 2;
        }
    </style>
</head>

<body>
    <h1>Using Dynamic fill and stroke colors</h1>
    <div class="container">
        <label for="fill-color">Fill Color:</label>
        <input type="color" id="fill-color"
               name="fill-color" 
               onchange="fillFn(event)">
        <br>
        <label for="stroke-color">Stroke Color:</label>
        <input type="color" id="stroke-color"
               name="stroke-color" 
               onchange="strokeFn(event)">
    </div>
    <svg viewBox="0 0 24 24">
        <circle cx="12" cy="12" r="10" />
    </svg>
    <script>
        function fillFn(event) {
            document.
                documentElement
              .style.setProperty('--custom-fill',
                                 event.target.value);
        }
        function strokeFn(event) {
            document.
                documentElement
              .style.setProperty('--custom-stroke',
                                 event.target.value);
        }
    </script>
</body>

</html>