Linear gradient in css

Code: CSS

2021-01-29 07:36:18

#grad {
  background-image: linear-gradient(to right, #f1b1b1 , #82e6e8);

}

3

NewMrd

Code: CSS

2021-04-23 17:38:17

background: linear-gradient(to left, red, blue);

9

Cody Pace

Code: CSS

2021-02-06 01:51:10

.foo {
	background-image: linear-gradient(red, blue);
}

8

Saqlain Pasha

Code: CSS

2021-04-02 15:58:04

background: linear-gradient(to left, #333, #333 50%, #eee 100%);

6

Mr.Y

Code: CSS

2021-02-06 01:50:03

.element {
    background: linear-gradient(pink 50%, cyan 50%);
}

3

Enver

Code: CSS

2021-01-29 07:38:24

The general syntax of linear-gradient is-
background: linear-gradient(gradient direction, color1 , color2 , color3, .....);

Forexample-
background: linear-gradient(46deg,green,blue,yellow,pink);

NOTE: (common mistake) we forget to write the semi-colon (;)

1

Nedunchezhian Chinnachamy

Code: CSS

2021-02-06 01:48:37

.gradient {
	background-image: linear-gradient(angle, color1, color2) // angle: 90deg,  color1: red, color2:darkred
}

7

Aziz

Code: CSS

2021-08-02 01:43:02

\\code for a basic gradient background
   #grad {
  background-image: linear-gradient(red, yellow);
}

12

Felixlew

Code: CSS

2021-01-29 07:35:04


   #grad {
  background-image: linear-gradient(red, yellow);
}

1

CPHPython

Code: CSS

2021-01-29 07:35:44

#gradient {
  background-image: linear-gradient(180deg, black, red);
}
/* can be applied in many places, as your <body> background or a <div> etc */

1

Jonathan de M.

Code: CSS

2021-01-29 07:38:45

/*From bottom to top*/
background: rgb(166,166,166);
background: linear-gradient(0deg, rgba(166,166,166,1) 0%, rgba(255,255,255,1) 29%);

0

Tags

Related

New to Communities?