I'm trying to create this white gradient effect using react-native-linear gradient to look like this
But when I use this code
<LinearGradient colors={["rgba(255,255,255,1) 0%" ,"rgba(255,255,255,1) 50%", "rgba(255,255,255,0) 100%"]}>
there is a dark shadow that ruins the fuzz/blur effect, seen here. It's there is an underlying dark shade underneath it?
Related
I'm using react-native-mathjax to render some equations inside a green color view, but math equations displays with white color background, is there any way to change its back ground color ?
In my uwp app I am trying to use the Acrylic Brush, I made a custom one because the default ones are not working for me. But if you notice here I have attached image from Microsoft docs and on right side is window of my app showing acrylic completely different on same background.
Code
<AcrylicBrush
x:Key="AppBackgroundAcrylicBrush"
BackgroundSource="HostBackdrop"
FallbackColor="Black"
TintColor="Black"
TintLuminosityOpacity="0.1"
TintOpacity="1" />
After that I tried luminosity to be 0.9 and now it looks dark grayish. But I want it to look jet black color Acrylic with small transparency. Basically I want it to look like as the image shows on left side as in Microsoft docs with 10% luminosity and 100% tint opacity.
Code
<AcrylicBrush
x:Key="AppBackgroundAcrylicBrush"
BackgroundSource="HostBackdrop"
FallbackColor="Black"
TintColor="Black"
TintLuminosityOpacity="0.9"
TintOpacity="1" />
Docs: https://learn.microsoft.com/en-us/windows/uwp/design/style/acrylic
Basically I want it to look like as the image showson left side as in microsoft docs with 10% luminosity and 100 % tint opacity.
Update
Base on the testing, TintLuminosityOpacity 0.9 and TintOpacity 1.0 could render you mentioned jet black color AcrylicBrush. But that is not conformity with document. And the AcrylicBrush looks dark gray. It is strange, I will report to related team. Currently, please try use the following to replace.
<AcrylicBrush
x:Key="CustomAcrylicBrush"
BackgroundSource="Backdrop"
FallbackColor="Black"
TintColor="Black"
TintLuminosityOpacity="1.0"
TintOpacity="1"
/>
Hello guys I want to make a transparent border radius so I can achieve
This style. (The icons border is clipping the box)
I am trying to create a UIToolbar which is dark black (real black as opposed to UIToolbar's "black"), that is slightly transparent or opaque. Below is a screenshot of the exact colour/opacity that I want it to be. Its the black overlay on top of the burger image.
I tried setting the colour, setting alpha, opaque property, translucent and nothing is working. Any suggestions?
Just make a png that is the color and opacity you want, add it to your project, and [myToolbar setBackgroundImage:thatImage];
Oops actually I think the method is setBackgroundImage:forToolbarPosition:barMetrics:
I changed the navbar background color using the following code
navconFvc.navigationBar.tintColor = [UIColor colorWithHexString:#"faf6f5"];
However, I realise that the gradient of the bar is now gone
How can I retain the gradient of the bar after the custom change of the bar's background color? I am hoping to be able to see a gradient effect like the original bar (like screenshot below)
Thanks!
The gradient is still there, you just can't see it because you have a near white tint. Use a darker tint and it'll be perceptible again. Now, if you want to change to a custom gradient for lighter backgrounds, then that's a different question