How can I stop SVG gradients from stretching in CSS Grid?

Paste markup and click Fix Grid stretch to rebalance preserveAspectRatio and gradient framing for grid cells.

Does objectBoundingBox behave differently in grid tracks?

Yes. Track sizing changes the bounding box, which can skew objectBoundingBox gradients unless aspect is locked.

Use Fix SVG Gradient Stretch in Flexbox for flex layouts.

No — free local browser tool.

FAQ

Quick answers

How can I stop SVG gradients from stretching in CSS Grid?: Paste markup and click Fix Grid stretch to rebalance preserveAspectRatio and gradient framing for grid cells.
Does objectBoundingBox behave differently in grid tracks?: Yes. Track sizing changes the bounding box, which can skew objectBoundingBox gradients unless aspect is locked.
Looking for a Flexbox-focused gradient stretch fix?: Use Fix SVG Gradient Stretch in Flexbox for flex layouts.
Do I upload files to fix grid gradient stretch?: No — free local browser tool.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B