HTML & CSS

Replace Legacy Mozilla Gradients with Standard CSS

Update -moz-linear-gradient declarations without rotating or reversing the design. Preserve stop positions, review the cascade, and test the standard result.

By Uddhav Gopani, FounderPublished 27 September 2026Updated 29 September 2026

Use standard syntax for current gradient code

The -moz-linear-gradient() function appears in older stylesheets written for prefixed Firefox implementations. For current code, use linear-gradient(). The migration requires checking the direction argument; simply deleting -moz- can make a declaration invalid or rotate the gradient while leaving its colors deceptively familiar.

Mozilla’s Firefox 16 unprefixing announcement explicitly describes the gradient syntax changes. Old side keywords described where the gradient started. Standard side keywords include to and describe its destination. The announcement also identifies the change from old zero degrees pointing right to standard zero degrees pointing up.

Migrate a three-stop panel deliberately

In this older example, the first color is at the top and the final color is at the bottom. The standard replacement points to bottom. Its intermediate stop remains at thirty percent of the gradient line. Keeping that stop fixed preserves the intentionally short first transition and longer second transition.

/* Historical source */
.old-panel {
  background-image: -moz-linear-gradient(top,
    #0f172a 0%, #334155 30%, #94a3b8 100%);
}
/* Standard replacement */
.new-panel {
  background-image: linear-gradient(to bottom,
    #0f172a 0%, #334155 30%, #94a3b8 100%);
}

Do not redistribute all stops evenly as part of removing the prefix. That is a design change, even if the new declaration is valid CSS. First reproduce the existing appearance; then make any requested palette or transition adjustment as a separate, reviewable edit.

Check numeric directions independently

An old zero-degree declaration represents a horizontal gradient from left to right. Its standard equivalent uses ninety degrees. In the old angle convention, positive angles rotate the opposite way from the standard convention, so the general conversion is standard angle = 90deg − old angle, modulo 360deg.

/* Same intended horizontal direction */
.old-horizontal {
  background-image: -moz-linear-gradient(0deg, #7c2d12, #fed7aa);
}
.new-horizontal {
  background-image: linear-gradient(90deg, #7c2d12, #fed7aa);
}

Use two distinctly different endpoint colors when checking the conversion. A gradient between nearly identical grays can look plausible after an accidental reversal, especially in a small button. Once the geometry is confirmed, restore the actual colors and inspect the component’s normal, hover and focused states.

Separate historical references from present requirements

Mozilla’s Firefox 3.6 gradient article documents an early implementation and even notes changes between beta versions. That history explains why old examples vary. It does not mean that a modern page should send a Mozilla-prefixed version exclusively to Firefox.

Search the maintained source and any build output separately. If a prefixing step recreates -moz- declarations, inspect the project’s supported-browser configuration before manually deleting generated lines. A clean source edit should survive the next build; otherwise the apparent repair disappears when assets are regenerated.

Test the replacement without confusing parser support

Inspect the computed background-image of the modern rule and confirm that it is not none. Then examine the actual orientation and stop placement. A parser accepting a declaration establishes syntax support, not visual equivalence. Conversely, testing an old Mozilla-only declaration in a different engine cannot establish how the original Firefox implementation rendered it.

For a site that still supports a specific historical browser, use that exact environment or a maintained compatibility test service to review the fallback. Keep the legacy branch only when the supported audience requires it. Current standard syntax can be checked in your normal modern-browser test matrix.

Also check narrow and wide component dimensions. An image-like background takes its geometry from the area in which it is painted, so a diagonal example may reveal a migration mistake only after resizing. Preserve the component’s existing background-size and background-position while comparing the old and new declarations.

Generate a fresh standard starting point

The CSS Gradient Generator can produce a two-color standard linear gradient from an angle and two hexadecimal colors. Enter the converted standard angle, not the historical numeric value. It does not inspect a stylesheet or decide which prefixed declarations your project should retain.

For the three-stop panel above, edit the complete CSS directly because the local generator exposes only two stops. After the replacement is verified, remove redundant obsolete variants from the maintained source and rebuild. Keep a useful solid background color beneath the gradient so a genuinely unsupported declaration does not leave the component without its intended surface.