Horizontal Sharp Background Gradient with Specific Length of First Color

Horizontal sharp background gradient with specific length of first color

The first parameter to the linear-gradient function is the direction in which the gradient should be applied. In the snippet in question, it is to right and so the output looks like columns. To change it to look like rows, just change the direction to to bottom like in the below snippet.

You can read more about linear-gradient and its arguments here.

div {  height: 300px;  background: linear-gradient(to bottom, #a2ea4c 200px, #07aa91 200px, #07aa91);}

<div></div>

Adding horizontal and vertical fading gradients on an element

You can use multiple gradient to simulate this:

body {  height:100vh;  margin:0;  background:   linear-gradient(to top,rgba(255,255,255,1),rgba(255,255,255,0)),   linear-gradient(to right,black,white);}

How to get two horizontal background colors in one div using linear gradient?

Try this https://jsfiddle.net/2Lzo9vfc/303/

 div {
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,1);
  background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 35%, rgba(0,0,0,1) 35%, rgba(0,0,0,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(35%, rgba(255,255,255,1)), color-stop(35%, rgba(0,0,0,1)), color-stop(100%, rgba(0,0,0,1)));
  background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 35%, rgba(0,0,0,1) 35%, rgba(0,0,0,1) 100%);
  background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 35%, rgba(0,0,0,1) 35%, rgba(0,0,0,1) 100%);
  background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 35%, rgba(0,0,0,1) 35%, rgba(0,0,0,1) 100%);
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 35%, rgba(0,0,0,1) 35%, rgba(0,0,0,1) 100%);
}

Gradient background is not applied for screen

As per the document react native linear gradient you need to specify start and end as an object specifying x and y coordinates.

          <View style={styles.container}>
            <LinearGradient 
              colors={['#4c669f', '#3b5998', '#192f6a']} 
              start={{x: 0, y: 0}} 
              end={{x:1, y: 1}} 
            />
          <View>

How to gradient locations work in iOS?

Docs say:

The gradient stops are specified as values between 0 and 1. The values must be monotonically increasing.

So locations have actually nothing to do with gradient orientation. Regarding the latter refer to this question. Locations mean location where gradient stop, eg. in first view red begins at 0 (top) and ends at 0.5 (middle), so further to bottom can be only solid blue. If you give [0.5, 0.5], it means, that both gradients should begin and end in the middle, so the colors don't mix at all.

Code producing the below gradients:

@interface TestViewController ()

@property (strong, nonatomic) IBOutlet UIView *view1;
@property (strong, nonatomic) IBOutlet UIView *view2;
@property (strong, nonatomic) IBOutlet UIView *view3;
@property (strong, nonatomic) IBOutlet UIView *view4;

@end

@implementation TestViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    NSArray *views = @[_view1, _view2, _view3, _view4];

    for (UIView *view in views) {
        view.layer.borderWidth = 1;
    }

    // 1
    CAGradientLayer *gradient = [CAGradientLayer new];
    gradient.colors = @[(id)[UIColor redColor].CGColor, (id)[UIColor blueColor].CGColor];
    gradient.frame = _view1.bounds;
    gradient.locations = @[@0.0, @0.5];
    [_view1.layer insertSublayer:gradient atIndex:0];

    // 2
    gradient = [CAGradientLayer new];
    gradient.colors = @[(id)[UIColor redColor].CGColor, (id)[UIColor blueColor].CGColor];
    gradient.frame = _view2.bounds;
    gradient.locations = @[@0.5, @1.0];
    [_view2.layer insertSublayer:gradient atIndex:0];

    // 3
    gradient = [CAGradientLayer new];
    gradient.colors = @[(id)[UIColor redColor].CGColor, (id)[UIColor blueColor].CGColor, (id)[UIColor greenColor].CGColor];
    gradient.frame = _view2.bounds;
    gradient.locations = @[@0.0, @0.5, @1.0];
    [_view3.layer insertSublayer:gradient atIndex:0];

    // 4
    gradient = [CAGradientLayer new];
    gradient.colors = @[(id)[UIColor redColor].CGColor, (id)[UIColor blueColor].CGColor, (id)[UIColor greenColor].CGColor];
    gradient.frame = _view4.bounds;
    gradient.locations = @[@0.0, @0.8, @1.0];
    [_view4.layer insertSublayer:gradient atIndex:0];
}

@end

---

Related Topics