Linear gradient without color transition

Question

I'm trying to generate a gradient background with linear-gradient in CSS. Here's an example codepen https://codepen.io/JSislife/pen/vYxrYEv. As you can see on the bottom right corner there is no transition of colors between orange and white; but the top left is the opposite. How do I make the top left not have a color transition as well?

like this ? background: linear-gradient(135deg, white 15%,#bd6430 15% 70%, white 70%) fixed; ? — G-Cyrillus
– G-Cyrillus, Commented Jun 6, 2021 at 23:01
@G-Cyrillus Thanks, that worked. Can you explain why there are 2 defined percentages here #bd6430 15% 70% ? Edit: nevermind, I see that you started the color at 15% of the width to match the first color placement — NewAtLearningThis
– NewAtLearningThis, Commented Jun 6, 2021 at 23:02

Tanner Dolby · Accepted Answer · 2021-06-06 23:12:54Z

2

Just as @G-Cyrillus mentioned in the comments, if you add color stops to your linear-gradient you can create gradient sections that don't fade into eachother but have defined start/stop positions.

body {
    margin: 0;
    padding: 0;
    background: linear-gradient(135deg, white 0% 15%, #bd6430 15% 70%, white 70%) fixed;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
</head>
<body>
    <div id='home'></div>
</body>
</html>

answered Jun 6, 2021 at 23:12

Tanner Dolby

4,5013 gold badges12 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Linear gradient without color transition

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related