Inspiring

Answered

Are bi-directional css gradients possible?

Forum|Forum|4 years ago
March 19, 2021
2 replies
2930 views

Easy enough to create css shadows under square objects with a simple :
background-image: linear-gradient(rgb(0,0,0,1),rgb(0,0,0,0)); <- This will fade in the default direction of top (black) to bottom (transparent), where all the pixels of each ROW has the same value.

But what if I want that ROW to also change colors, left to right?
This would open the door to other effects, like :

or

I guess it could be done easily enough with two tilted gradients inside a clipping container, but it wouldn't be as fluid/liquid as a single bi-directional gradient would be.

If this is possible, could someone show me the syntax? To produce that last (3rd) image, for example.

Thanks!

EDIT: To be clear, I know how to do an horizontal gradient. It's the two directions at the same time part I'm unsure of.

This topic has been closed for replies.

Correct answer B i r n o u

I'm not familiar with mask-image, but I ran your code and it works!

...but only on Firefox (87.0, ie latest)

On Chrome and Edge, I get :

I take it mask-image is not universally implemented yet?

This would've been THE solution, if it worked on all 4 major browsers.

This is the closest we've gotten so far.

Who would've thunk something would work on Firefox and nowhere else in 2021?

have you try to prefix it 😉

-webkit-mask-image

B i r n o u

Community Expert

if I understand quiet well what you mean, simply add gradient separated by comma, well in the basci form it gives something as :

	<style>
		.gradient {
		  background-image:
		    linear-gradient(to top, transparent, red, transparent),
		    linear-gradient(to left, transparent, blue, transparent),
		    linear-gradient(to bottom, transparent, green, transparent),
		    linear-gradient(to right, transparent, white, transparent);
		}
	</style>

the result is:

but you can play with degree end percent on each range of color, plus playing with tsl can reflect better separation

PS as you could understand it I prefer to play with the TSL (HSL in English) which are more powerful than the RVB (RGB in English)

U

Under S.Author

Inspiring

Nice to know you can string them along via commas like that. Armed with this info, I tried the following :
background-image:

linear-gradient(to bottom,black,transparent),

linear-gradient(to right,transparent,black,transparent);

In the hopes of producing :

But if you've tried it, that's not what happens (at least not on my end).

Could you give me the exact, literal syntax to produce the above gradient, using only black + transparent as endpoints? (The container here is a wide div; top row middle point is 100% black, fading to all 3 other sides, which are 100% transparent.)

Many thanks!

B i r n o u

Community Expert

You did it, Birnou! 🙂

div.gradient {

width: 10em; height: 3em;
background-image: linear-gradient(to right, transparent, black, transparent);
mask-image: linear-gradient(black, transparent);
-webkit-mask-image: linear-gradient(black, transparent);
}

I tweaked it a bit (the "60%" was keeping it from looking as fluid as it could) but I can confirm the above works in all 4 major updated browsers, including mobile. Exactly the way I was asking.

I'll mark your first suggestion as the correct answer; perhaps editing that webkit part into it might be helpful for future readers, as well.

glad it helped... cool...

you can also place two answers as correcxt, that way the webkit part will be also present.

BenPleysier

Community Expert

background-image: linear-gradient(to right, red, orange, orange, red);

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

U

Under S.Author

Inspiring

Thanks, but I believe you might've mis-read the question there, Ben.

I know how to make an horizontal gradient. I also know how to make a vertical gradient. But what I WANT is a single gradient going in both directions to produce the following effect :

The above is more-or-less the visual representation of "to right, transparent, black, transparent + to bottom, black, transparent" if such a thing were possible (and it would be, using rgb transparency, provided the gradient can go in both directions at the same time).

Can it? And if so, what's the syntax?

Thanks!

Nancy OShea

Community Expert

What about a radial gradient?

selector { background: radial-gradient(#fff, #000); }

https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient()

Nancy O'Shea— Product User & Community Expert

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded