question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

background property does not support linear-gradient anymore

See original GitHub issue

The background property for <Box> no longer supports css gradients as strings

Expected Behavior

In previous versions it has worked, i rolled back to 2.10.0 and I get my gradients back, but in 2.15.2 they have stopped working. It seems 2.13 was the last working version for this (see code pen link)

Actual Behavior

URL, screen shot, or Codepen exhibiting the issue

Try rolling back to 2.13 or older, gradient comes back.

https://codesandbox.io/s/thirsty-elgamal-8n0md?file=/src/App.js

Steps to Reproduce

add this background property to Box component background="linear-gradient(rgba(0,0,0,1), rgba(34,26,62,1))"

Your Environment

  • Grommet version: 2.15.2
  • Browser Name and version: Chrome
  • Operating System and version (desktop or mobile): desktop, windows

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
fuzingcommented, Nov 27, 2020

Hi -

I was literally just about to say that after upgrading to 2.16.0 it appears fixed…

Sorry!

0reactions
ShimiSuncommented, Nov 27, 2020

@fuzing are you using grommet v2.16.0? The problem is supposed to be solved on this release. Please send us reproducible code in case it doesn’t.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Background Gradient property is not working - Stack Overflow
Here your are facing two issues. First you have to consider that by making the .parent element absolute position, you remove it from...
Read more >
linear-gradient() - CSS: Cascading Style Sheets | MDN
The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line.
Read more >
CSS Gradients
Gradients are background-image​​ While declaring the a solid color uses background-color property in CSS, gradients use background-image . This ...
Read more >
What no one told you about CSS Variables
An important rule is to always consider CSS variables (custom properties) as ordinary properties and not only variables that store values.
Read more >
Problem with Linear Gradient in Safari - HTML & CSS - SitePoint
in Safari when i inspect the element, the “background-image” line has a warning icon by it but doesn't tell me what's going on...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found