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 media] Gradient when top-down

See original GitHub issue

This was fixed in Lead space centered. Still need to be fixed in Background media component. From left to right, the values of the stops are:

0% start from the top, 100 opacity
64% down, 60 opacity
86% down, 0 opacity
100% down, 0 opacity

background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(2,0,36,0.6) 64%, rgba(2,0,36,0) 86%, rgba(2,0,36,0) 100%);

Issue Analytics

State:
Created 2 years ago
Comments:6 (4 by maintainers)

Top GitHub Comments

2reactions

ariellalgilmorecommented, Oct 15, 2021

@emyarod i don’t believe we want to switch to using the SVG. We would prefer to be able to use RGBA values instead such as rgba($ui-background, 0.6). We are currently blocked as we cannot set an opacity to the token

1reaction

RobertaJHahncommented, Aug 27, 2021

@shixiedesign Added the Core Carbon label and kept in the Pending Scheduling rather than icebox because we look at that pipeline regularly to find work that can be scheduled.

Top Results From Across the Web

Using CSS gradients - CSS: Cascading Style Sheets | MDN

CSS gradients are represented by the data type, a special type of made of a progressive transition between two or more colors.

Gradient Background Gradient Comes Top Down Stock ...

Find Gradient Background Gradient Comes Top Down stock images in HD and millions of other royalty-free stock photos, illustrations and vectors in the ......

Background Gradient: Add Gradient Effects to Your WordPress ...

With Background Gradient, you can easily control the location, angle and colors of the gradient effect, as well as set it as linear...

Fun with Linear & Radial Gradients | by Sean Melody - Medium

Also because of this, they can be set to repeating, or to a set height. /* Top down gradient red -> Yellow*/ background-image:...

CSS-Only Multi-Color Backgrounds - Prototypr

The simple logic here is that we stop the first color at an x% and start the second color at x% or <x%....