CSS flood-color Property

Syntax and Values

The flood-color property accepts any valid CSS <color> value, providing extensive flexibility in how you specify flood colors. This includes named colors, hexadecimal values, RGB and RGBA functional notation, HSL and HSLA notation, and the special currentColor keyword.

Accepted Value Types

/* Named colors */
flood-color: red;
flood-color: seagreen;

/* Hexadecimal */
flood-color: #ff3366;
flood-color: #f36;

/* RGB and RGBA */
flood-color: rgb(255, 51, 102);
flood-color: rgba(255, 51, 102, 0.5);

/* HSL and HSLA */
flood-color: hsl(340deg 100% 60%);
flood-color: hsla(340deg 100% 60% / 0.5);

/* currentColor keyword */
flood-color: currentColor;

/* Modern CSS color functions */
flood-color: color-mix(in srgb, red 50%, blue 50%);
flood-color: oklch(70% 0.15 340);

/* Global values */
flood-color: inherit;
flood-color: initial;
flood-color: unset;

The currentColor keyword deserves special mention, as it allows the flood color to inherit from the element's computed color property. This enables dynamic color control through a single CSS rule.

Formal Definition

Initial Value

The flood-color property has an initial value of black, meaning that filter primitives using flood operations will default to black if no color is specified. This default ensures that filters have predictable behavior when color is not explicitly set, though most practical applications will override this with brand colors or theme-appropriate values.

Animation Behavior

Colors animate smoothly between values, making it possible to create transition effects on filter colors. The property animates by computed value, meaning browsers interpolate between computed color values when transitions occur.

Inheritance

The property is not inherited, so each filter primitive maintains its own color configuration independently. Each element in a filter chain operates with its own declared flood color rather than inheriting from parent elements.

Application Scope

The property applies specifically to <feFlood> and <feDropShadow> elements nested within an <svg> element. This scope limitation means flood-color has no effect on regular HTML elements or other SVG shapes.

Practical Examples

Basic Flood Color Override

The most common use case for flood-color involves overriding the flood-color attribute on SVG filter elements. This approach allows developers to define filter structure in SVG markup while controlling colors through CSS, enabling theming and dynamic adjustments:

<svg viewBox="0 0 420 120">
 <filter id="flood1">
 <feFlood flood-color="seagreen" />
 </filter>
 <rect id="r1" filter="url(#flood1)" />
</svg>

#flood1 feFlood {
 flood-color: rebeccapurple;
}

Colored Drop Shadows with feDropShadow

The <feDropShadow> primitive simplifies creating drop shadows, and flood-color controls the shadow's base color:

.brand-button {
 filter: drop-shadow(0 4px 6px);
}

.brand-button feDropShadow {
 flood-color: rgba(0, 102, 204, 0.3);
}

@media (prefers-color-scheme: dark) {
 .card feDropShadow {
 flood-color: rgba(0, 0, 0, 0.5);
 }
}

Animated Color Transitions

Because flood-color animates by computed value, you can create smooth color transitions for interactive effects:

.glow-button {
 filter: drop-shadow(0 0 8px);
}

.glow-button feDropShadow {
 flood-color: rgba(255, 200, 0, 0.5);
 transition: flood-color 0.3s ease;
}

.glow-button:hover feDropShadow {
 flood-color: rgba(255, 100, 0, 0.7);
}

Themeable Colors with CSS Custom Properties

CSS custom properties provide an elegant solution for themeable filter colors:

:root {
 --shadow-color: rgba(0, 0, 0, 0.15);
 --glow-color: rgba(255, 200, 0, 0.4);
}

.card feDropShadow {
 flood-color: var(--shadow-color);
}

.highlight feFlood {
 flood-color: var(--glow-color);
}

[data-theme="dark"] {
 --shadow-color: rgba(0, 0, 0, 0.5);
 --glow-color: rgba(255, 150, 0, 0.3);
}

This approach centralizes color management and makes it easy to adjust filter colors across an entire application.

Browser Compatibility

The flood-color property is Baseline Widely Available, indicating it has been available across all major browser engines for an extended period. The property reached widespread browser support in July 2015, making it a safe choice for production use in modern web applications.

No fallback strategy is required for production use. However, as with any CSS feature, testing across target browsers remains good practice, particularly for complex filter chains that combine multiple primitives.

Progressive Enhancement

Given its broad support, flood-color requires no fallback strategy for older browsers. The property works consistently across all modern browser engines, enabling you to use it confidently in production applications.

Related Properties

flood-opacity

The flood-opacity property works alongside flood-color to control the transparency of flood regions. While flood-color sets the hue, flood-opacity adjusts the alpha channel:

feFlood {
 flood-color: red;
 flood-opacity: 0.5;
}

This combination enables semi-transparent flood effects that blend with underlying content.

Related SVG Color Properties

• lighting-color: Controls the color of the light source in lighting filters
• stop-color: Defines colors for gradient stops
• fill: Colors the interior of SVG shapes
• stroke: Colors SVG element outlines

Related SVG Attributes

• flood-color (SVG attribute): The SVG equivalent that CSS can override
• flood-opacity (SVG attribute): The attribute version of flood-opacity

Further Reading

To expand your knowledge of CSS visual effects, explore our guides on creating custom animations with Tailwind CSS, CSS animation libraries, and creating React animations with Motion.

Implementation Best Practices

Performance Considerations

Filter effects can be computationally expensive, particularly when applied to large elements or complex filter chains. When using flood-color, consider the following guidelines:

• Apply filters to appropriately sized elements to minimize rendering cost
• Avoid animating filter properties on scrollable or frequently repainted elements
• Test performance on target devices, especially mobile
• Use CSS containment to limit the scope of filter application

Accessibility Considerations

While filter effects enhance visual appeal, ensure they don't compromise accessibility:

• Maintain sufficient contrast for text and interactive elements
• Avoid motion effects that may trigger vestibular disorders
• Provide alternative visual indicators beyond color-dependent filters
• Respect prefers-reduced-motion for animated filter effects

Theme Integration Pattern

:root {
 --filter-shadow-color: rgba(0, 0, 0, 0.15);
 --filter-glow-color: rgba(255, 200, 0, 0.3);
}

[data-theme="dark"] {
 --filter-shadow-color: rgba(0, 0, 0, 0.5);
 --filter-glow-color: rgba(255, 150, 0, 0.2);
}

@media (prefers-color-scheme: dark) {
 :root:not([data-theme="light"]) {
 --filter-shadow-color: rgba(0, 0, 0, 0.5);
 --filter-glow-color: rgba(255, 150, 0, 0.2);
 }
}

This pattern ensures your filter colors work seamlessly across light and dark themes while respecting user preferences.

Summary

The flood-color property bridges SVG filter functionality with CSS syntax, enabling developers to control flood region colors in <feFlood> and <feDropShadow> elements through stylesheets. Key takeaways:

• Specialized scope: Only affects filter primitives in SVG, not regular elements
• Flexible values: Accepts any CSS color value including named colors, hex, RGB, HSL, and currentColor
• Cascade integration: CSS declarations override SVG attributes seamlessly
• Animation support: Smooth color transitions through CSS transitions and keyframes
• Universal support: Safe for production across all modern browsers since 2015

Mastering flood-color opens possibilities for branded shadows, themed glow effects, and dynamic filter responses that adapt to user interaction and system themes. Combined with CSS custom properties, the property enables maintainable color management across applications.

To learn more about creating sophisticated visual effects and other advanced CSS transforms, explore our guide on Scale3D and other web development resources. For professional implementation of these techniques, consider working with our web development services team.

Sources

1. MDN Web Docs: flood-color CSS Property
2. MDN Web Docs: flood-color SVG Attribute
3. MDN Web Docs: feFlood Element
4. MDN Web Docs: feDropShadow Element
5. Filter Effects Module Level 1 - W3C
6. Nucleo App: How to Change SVG Color with CSS