linear gradient css
/* A gradient tilted 100 degrees,
starting gray and finishing black */
.class {
background: linear-gradient(100deg, rgba(63, 63, 63, 0.8) 0%, rgba(255, 255, 255, 0) 25%);
}
/* A gradient going from the bottom to top
starting red and finishing orange */
.class {
background: linear-gradient(to top, #f32b60, #ff8f1f);
}css linear gradient
#grad {
background-image: linear-gradient(to right, #f1b1b1 , #82e6e8);
}how to make a linear gradient in css
/* Add the class name insted of class */
.class {
background: linear-gradient(to top, #000000, #fffffff);
}css linear gradient
#gradient {
background-image: linear-gradient(180deg, black, red);
}
/* can be applied in many places, as your <body> background or a <div> etc */sideways linear gradient
/* A gradient tilted 45 degrees,
starting blue and finishing red */
linear-gradient(45deg, blue, red);
/* A gradient going from the bottom right to the top left corner,
starting blue and finishing red */
linear-gradient(to left top, blue, red);
/* Color stop: A gradient going from the bottom to top,
starting blue, turning green at 40% of its length,
and finishing red */
linear-gradient(0deg, blue, green 40%, red);
/* Color hint: A gradient going from the left to right,
starting red, getting to the midpoint color
10% of the way across the length of the gradient,
taking the rest of the 90% of the length to change to blue */
linear-gradient(.25turn, red, 10%, blue);
/* Multi-position color stop: A gradient tilted 45 degrees,
with a red bottom-left half and a blue top-right half,
with a hard line where the gradient changes from red to blue */
linear-gradient(45deg, red 0 50%, blue 50% 100%);liner gradient
<style>
div{
border-radius: 20px;
height: 400px;
margin: 50 auto;
background: repeating-linear-gradient(
45deg,
yellow 0px,
yellow 40px,
black 40px,
black 80px
);
}
</style>
<div></div>Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
