TL;DR All the percentage values used with background-position are equivalent when using a gradient as background, so you won’t see any difference. You need to specify a background-size different from the container size: body { display: flex; flex-direction: column; justify-content: space-around; align-items: center; min-height:90vh; } .button { text-decoration: none; color: white; font-weight: bold; width: 350px; … Read more
You can do it in CSS, but there isn’t much support in browsers other than modern versions of Chrome, Safari and Opera at the moment. Firefox currently only supports SVG masks. See the Caniuse results for more information. EDIT: all browsers except IE now support all mask- properties mentioned here. CSS: p { color: red; … Read more
The border-image property can accomplish this. You’ll need to specify border-style and border-width too. border-image: linear-gradient(#f6b73c, #4d9f0c) 30; border-width: 4px; border-style: solid; Read more on MDN.
background-image: -ms-linear-gradient(right, #0c93C0, #FFF); background-image: -o-linear-gradient(right, #0c93C0, #FFF); All experimental CSS properties are getting a prefix: -webkit- for Webkit browsers (chrome, Safari) -moz- for FireFox -o- for Opera -ms- for Internet Explorer no prefix for an implementation which is in full accordance with the specification. Use top right instead of right, if you want a … Read more
Late to the party, but maybe someone will find it useful! You can actually do it with multiple shadows on the box-shadow: box-shadow: inset 0px 33px 25px 0 #000, inset 0 66px 15px 0px #ccc, inset 0 99px 5px 0px #fff; codepen example : https://codepen.io/InFecT3D/pen/JQdmeL Side note: it might be a little “hacky” approach, but … Read more
2021: I recommend using the CSS mask method since the support is pretty good now You cannot use border-radius with gradient. Here is another idea where you can rely on multiple background and adjust the background-clip: .white-grad { background: linear-gradient(#ccc 0 0) padding-box, /*this is your grey background*/ linear-gradient(to right, #9c20aa, #fb3570) border-box; color: #313149; … Read more
I was able to solve this issue using this function, which is based on the less.js function: http://lesscss.org/functions/#color-operations-mix function pickHex(color1, color2, weight) { var w1 = weight; var w2 = 1 – w1; var rgb = [Math.round(color1[0] * w1 + color2[0] * w2), Math.round(color1[1] * w1 + color2[1] * w2), Math.round(color1[2] * w1 + color2[2] … Read more
Please try this code: #gradient { height:300px; width:300px; border:1px solid black; font-size:30px; background: linear-gradient(130deg, #ff7e00, #ffffff, #5cff00); background-size: 200% 200%; -webkit-animation: Animation 5s ease infinite; -moz-animation: Animation 5s ease infinite; animation: Animation 5s ease infinite; } @-webkit-keyframes Animation { 0%{background-position:10% 0%} 50%{background-position:91% 100%} 100%{background-position:10% 0%} } @-moz-keyframes Animation { 0%{background-position:10% 0%} 50%{background-position:91% 100%} 100%{background-position:10% 0%} … Read more
Your code works fine. You just have to remember to set the gradient’s frame every time. It is better to just make the gradient category also set the frame of the view for you. That way you don’t forget and it applies fine. import UIKit extension UIView { func applyGradient(colours: [UIColor]) -> CAGradientLayer { return … Read more
You can yield slightly better results by making your gradient go from the first colour to transparent, with a background-color underneath for your second colour. I’d also recommend playing around with background-size for large gradients that stretch across the screen, so the gradient doesn’t actually fill the whole screen.