I have a black background and want to add a block inside with simple CSS gradient from transparent to 0.7 white:
linear-gradient(to right,
hsla(0, 0%, 100%, 0),
hsla(0, 0%, 100%, 0.76) 14%,
hsla(0, 0%, 100%, 0.76)
)
But this looks bad:
The only way I found is to add additional color stops, manually.
background: linear-gradient(
to right,
hsla(0, 0%, 100%, 0),
hsla(0, 0%, 100%, 0.05) 2%,
hsla(0, 0%, 100%, 0.09) 3%,
hsla(0, 0%, 100%, 0.2) 5%,
hsla(0, 0%, 100%, 0.57) 11.5%,
hsla(0, 0%, 100%, 0.69) 14%,
hsla(0, 0%, 100%, 0.75) 16.5%,
hsla(0, 0%, 100%, 0.76) 17.5%,
hsla(0, 0%, 100%, 0.77)
);
And it looks much better:
The comparsion demonstration on CodePen
Is there an easier way to make CSS gradient smooth on color stops?
One day, I hope, we've got this:
linear-gradient(
to top,
hsla(330, 100%, 45%, 0),
cubic-bezier(0.45, 0, 0.5, 0.5),
hsla(330, 100%, 45%, 1)
);
Bot for now, we have this:
PostCSS plugin with 2 options: https://github.com/larsenwork/postcss-easing-gradients
An app allowng you to choose an easing function: https://larsenwork.com/easing-gradients/
I didn't fully understand yet what it is what you intend to do, but as far as I got it would you like to add a box on a black background with a gradient on the left side from transparent (so still black) to white with 0.7 transparency or #C2C2C2. If that's what you'd like to do, I'd not use hsl (because of basic color theory) but rather rgba.
Check this out:
<html>
<head>
<style>
#blackbg {
background-color: black;
height: 300px;
}
#grad1 {
height: 200px;
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255, 255, 255, 0.7));
}
</style>
</head>
<body>
If this wasn't what you intended to do or you still feel stuck with something, feel free to ask me back.
<div id="blackbg">
<div id="grad1"></div>
</div>
</body>
</html>
Related
I'm currently trying to recreate the following background design:
I have tried many variations from using linear-gradient to conic-gradients. I wasn't able to make this using CSS only.
Is it possible to create this background using CSS only? If yes, could someone point me to the right direction?
I would like to avoid using a background image here
You could use CSS background as several radial-gradients:
* { margin: 0; box-sizing: border-box; }
body {
font: 16px/1.4 sans-serif; letter-spacing: 0.12em;
min-height: 100vh;
background-image:
radial-gradient(circle at 20% 20%, hsla(100, 60%, 30%, 0.2) 0%, transparent 30%),
radial-gradient(circle at 40% 30%, hsla(150, 60%, 30%, 0.2) 0%, transparent 30%),
radial-gradient(circle at 60% 40%, hsla(250, 60%, 30%, 0.2) 0%, transparent 30%),
radial-gradient(circle at 80% 50%, hsla(340, 60%, 30%, 0.2) 0%, transparent 30%);
}
This question already has answers here:
How to remove the stripes that appears when using linear gradient property [duplicate]
(2 answers)
Closed 3 years ago.
I am trying to make the background a gradient color. But when I do that It comes out all weird with a bunch of lines... it doesn't look right. However, when it doesn't take up the whole background say, width:500px and height: 500px, it looks fine. I don't really understand what's happening here.
body {
background-image: linear-gradient(red, 10%, pink);
}
It’s most likely “color banding” which is a problem with monitors that don’t support tons of colors such that it can create a perfect gradient. It might look fine on a properly calibrated monitor.
Linear gradients are also not as good as gradients based on a bezier curve to using “easing” to make a more smooth blend between colors.
Example of a linear gradient with more points that have an easing curve:
linear-gradient(
hsl(0, 0%, 0%) 0%,
hsla(0, 0%, 0%, 0.738) 19%,
hsla(0, 0%, 0%, 0.541) 34%,
hsla(0, 0%, 0%, 0.382) 47%,
hsla(0, 0%, 0%, 0.278) 56.5%,
hsla(0, 0%, 0%, 0.194) 65%,
hsla(0, 0%, 0%, 0.126) 73%,
hsla(0, 0%, 0%, 0.075) 80.2%,
hsla(0, 0%, 0%, 0.042) 86.1%,
hsla(0, 0%, 0%, 0.021) 91%,
hsla(0, 0%, 0%, 0.008) 95.2%,
hsla(0, 0%, 0%, 0.002) 98.2%,
hsla(0, 0%, 0%, 0) 100%
);
Can someone explain the following radial gradient syntax and perhaps provide its equivalent in CSS3 standard format that works across modern browsers?
-webkit-radial-gradient( 50% 50%, 200% 50%, hsla(0, 0%, 90%, 1) 5%, hsla(0, 0%, 85%, 1) 30%, hsla(0, 0%, 60%, 1) 100%)
-webkit-radial-gradient(50% 50%,
200% 50%,
hsla(0, 0%, 90%, 1) 5%, hsla(0, 0%, 85%, 1) 30%, hsla(0, 0%, 60%, 1) 100%)
The radial-gradient provided above can be explained as follows:
The gradient is a radial gradient which means the colors change in circular/elliptical path along a defined radius.
The first parameter 50% 50% defines the position of the gradient image's center point. Here it is nothing but the center of the container element on which it is applied.
The second parameter 200% 50% defines the radius of the gradient in X-axis and Y-axis. Here the radius is 200% of the container's width in X-axis and 50% of the container's height in Y-axis.
The above setting along with the container's dimensions determine the shape of the gradient. If the container is 250px tall and 250px wide then the radius in X-axis would be 500px whereas the radius in Y-axis would be 125px and so the gradient would be elliptical. On the other hand if the container is 400px tall and 100px wide then the radius in X-axis would be 200px and the radius in Y-axis would also be 200px. So, the gradient's shape would be a circle.
The next set of parameters define the colors and where they should end/stop. The gradient would have hsla(0, 0%, 90%, 1) as color till 5%, from 5% to 30% the color would gradually move from hsla(0, 0%, 90%, 1) to hsla(0, 0%, 85%, 1) and then from 30% to 100% it would move from hsla(0, 0%, 85%, 1) to hsla(0, 0%, 60%, 1).
The equivalent standard syntax for this radial-gradient would be the following:
background: radial-gradient(ellipse 200% 50% at 50% 50%, hsla(0, 0%, 90%, 1) 5%, hsla(0, 0%, 85%, 1) 30%, hsla(0, 0%, 60%, 1) 100%);
The below snippet has the output of both of them for comparison.
div {
float: left;
height: 250px;
width: 250px;
border: 1px solid black;
margin-right: 4px;
}
.radial-grad {
background: -webkit-radial-gradient(50% 50%, 200% 50%, hsla(0, 0%, 90%, 1) 5%, hsla(0, 0%, 85%, 1) 30%, hsla(0, 0%, 60%, 1) 100%);
}
.radial-grad-standard {
background: radial-gradient(ellipse 200% 50% at 50% 50%, hsla(0, 0%, 90%, 1) 5%, hsla(0, 0%, 85%, 1) 30%, hsla(0, 0%, 60%, 1) 100%);
}
<div class='radial-grad'></div>
<div class='radial-grad-standard'></div>
Is it possible to make background with 3 images and gradient?
I would like to make background where one image will be repeat on whole site and gradient will be added on it. Then second image will be display on right center and the third on left center. Please give me an example of use.
Edit:
Now I have
background: -moz-linear-gradient(left, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 10%, rgba(0,0,0,0) 34%, rgba(0,0,0,0) 69%, rgba(0,0,0,0.2) 90%, rgba(0,0,0,0.5) 100%),
url('images/block.png') repeat 0% 0%,
url('images/chef.png') no-repeat 0 0;
You can search info on Google before asking, but here is your answer:
.multi_bg_example {
width: 100%;
height: 500px;
background-image : url(/exp.png),
url(/exp2.png),
linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
background-repeat : no-repeat,
no-repeat,
no-repeat;
background-position: bottom right,
left,
right;
}
http://jsfiddle.net/d1ceayxv/
More info:https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds
I'm trying to set the width of an element using attr() in CSS but it's not working. Chrome says "invalid property value" but I'm not sure what's wrong.
I'm trying to use the attribute "prog" as the width in percent for the .progress div.
Here's my example on codepen.
<div class="progresscontainer">
<div class="progress" prog="10">
</div>
</div>
.progresscontainer {
position:absolute;
background-color:black;
width:500px;
height:100px;
border-radius:5px;
border:1px solid black;
overflow:hidden;
}
.progress {
background-color: green;
background: -webkit-linear-gradient(top, transparent -100%, rgba(255, 255, 255, 0.5) 50%, transparent 200%), -webkit-linear-gradient(top, lime 0%, lightgreen 50%, green 50%, darkgreen 100%);
background: -moz-linear-gradient(top, transparent -100%, rgba(255, 255, 255, 0.5) 50%, transparent 200%), -moz-linear-gradient(top, lime 0%, lightgreen 50%, green 50%, darkgreen 100%);
background: -ms-linear-gradient(top, transparent -100%, rgba(255, 255, 255, 0.5) 50%, transparent 200%), -ms-linear-gradient(top, lime 0%, lightgreen 50%, green 50%, darkgreen 100%);
background: linear-gradient(top, transparent -100%, rgba(255, 255, 255, 0.5) 50%, transparent 200%), linear-gradient(top, lime 0%, lightgreen 50%, green 50%, darkgreen 100%);
position:absolute;
height:100%;
width: attr(prog %);
}
This is an experimental, or at least draft, feature of CSS, and currently, according to Mozilla Developer Network's documentation, is only compatible with the CSS content property (in which it can return a string to be placed inside a pseudo-element), but cannot (yet) be used to generate values for other properties.
References:
attr() (at MDN).
attr() (at W3C).
Actually, there is a way to get around the attr() solution:
I don't recommend this, but you could account for every scenario of data-width attribute, for example:
(stylus code)
$limit = 300
.myClass
for num in (1...$limit)
&[data-width="${limit}"]
width $limit
Albeit, this is a terrible approach, and leads to way too much CSS. I just wanted to point out that there's always a way.
There is actually a way to get attributes / variables from html (or your template framework) to css, using var() (see this article for more info)
.progress {
width: var(--prog);
}
/* Rest of styling */
.progresscontainer {
position:absolute;
background-color:black;
width:500px;
height:100px;
border-radius:5px;
border:1px solid black;
overflow:hidden;
}
.progress {
background-color: green;
background: -webkit-linear-gradient(top, transparent -100%, rgba(255, 255, 255, 0.5) 50%, transparent 200%), -webkit-linear-gradient(top, lime 0%, lightgreen 50%, green 50%, darkgreen 100%);
background: -moz-linear-gradient(top, transparent -100%, rgba(255, 255, 255, 0.5) 50%, transparent 200%), -moz-linear-gradient(top, lime 0%, lightgreen 50%, green 50%, darkgreen 100%);
background: -ms-linear-gradient(top, transparent -100%, rgba(255, 255, 255, 0.5) 50%, transparent 200%), -ms-linear-gradient(top, lime 0%, lightgreen 50%, green 50%, darkgreen 100%);
background: linear-gradient(top, transparent -100%, rgba(255, 255, 255, 0.5) 50%, transparent 200%), linear-gradient(top, lime 0%, lightgreen 50%, green 50%, darkgreen 100%);
position:absolute;
height:100%;
}
<div class="progresscontainer">
<div class="progress" style="--prog: 10%;"></div>
</div>
Support for attributes other than content is Experimental. In other words, browsers do not support this yet even though it is seemingly valid.
Here is an example showing that it does work with content, but not width.