CSS Gradients | CSS Linear Gradient - CSS Tutorial 85

Notes for You:: CSS Gradients | CSS Linear Gradient - CSS Tutorial 85
- is used to create a background consisting of transition between two or more colors along a straight line.

Syntax:
background: linear-gradient(direction, color-stop1, color-stop2,........., last-color-stop);
OR
background-image: linear-gradient(direction, color-stop1, color-stop2,........., last-color-stop);

direction can be:
- to left, to right, to top, to bottom ,
- to top left, to top right, to bottom left, to bottom right
- or angle in degrees.

color-stop: color position
- color : color name, hex color value , rgb(0-255,0-255,0-255), rgba(0-255,0-255,0-255,0-1)
- position: px or %

Example:
background: linear-gradient(to right, red 0%, blue 100%);
background: linear-gradient(to bottom right, red 0%, blue 100%);
background: linear-gradient(90deg, red 0%, blue 100%);
background: linear-gradient(to right, red 0%, green 50%, blue 100%);
background: linear-gradient(to right, red 0%, red 25%, green 25%,green 50%,blue 50%, blue 100%);

repeating-linear-gradient:
- is used to create a repeating linear gradient.

Syntax:
background: repeating-linear-gradient(direction, color-stop1, color-stop2, ..., last-color-stop);
OR
Background-image: repeating-linear-gradient(direction, color-stop1, color-stop2, ..., last-color-stop);

Example:
background: repeating-linear-gradient(90deg,white 0px, white 20px,black 20px, black 40px);

=========================================

Follow the link for next video:
CSS Tutorial 86 - CSS Radial Gradient Background Tutorial

Follow the link for previous video:
CSS Tutorial 84 - CSS Multiple Backgrounds | CSS Multiple Background Images

=========================================

CSS Tutorials Playlist:-

=========================================
Watch My Other Useful Tutorials:-

HTML Tutorials Playlist:-

JavaScript Tutorials Playlist:-

jQuery Tutorials Playlist:-

=========================================

► Subscribe to our YouTube channel:

► Visit our Website:

=========================================
Hash Tags:-
#ChidresTechTutorials #CSS #CSSTutorial

[ChidresTechTutorials]

SUBSCRIBE, SHARE & SUPPORT:
VISIT & LEARN AT FREE OF COST:

[ravisinghrawat]

Thankyou Sir.
Which adobe photoshop version you are using??
one more thing i want to ask is that i have adobe photoshop CS and this linear gradient interface is different in adobe photoshop CS. Can I understand this linear gradient property through this adobe photoshop version also??

[ankushanand]

Sir, thank you for the video. Can you please tell me why do we metion % with color?

[AkohCaesia-xolx]

Can you use an image for the next video, a video color gradient effect

[priyathakur]

this was really nice sir...thank you so much

[technospeed]

is section ka "Simplify billing from order to cash"