I'm struggling to find a nice way to fade a vertical gradient at its left and right sides. Basically a top-bottom gradient with the left-right ends faded to 0% opacity.
I need it to be a Transparent fade out so that it can be on top of images/videos.
Here is a quick visual of what I am aiming for:
Any suggestions?
Pretty Simple, You just need to add transparent in a linear gradient.
div {
background:linear-gradient(to right, transparent, #00F5CB, transparent);
width: 100%;
height:64px;
}
<div></div>
Use multiple backgrounds. The first one is on top.
div {
width: 100%;
height: 100px;
background-image: linear-gradient( to right, white 0%, transparent 30%, transparent 70%, white 100%),
linear-gradient( to bottom, Lightgreen, Aquamarine);
}
<div></div>
You can try multiple background like this:
.box {
width: 500px;
height: 80px;
margin:auto;
background:
radial-gradient(ellipse at top, #7ff5b0 20%, transparent 70%) top center/80% 100%,
linear-gradient( to right, transparent 0%, #19d9ef 30%, #19d9ef 70%, transparent 100%);
background-repeat:no-repeat;
color: ;
color: ;
}
body {
background:pink
}
<div class="box"></div>
Related
I am trying to create a CSS gradiant based vertical progress bar as shown in the figure.
Sample Image
I want to achieve the followings:
It should only have two colors.
The gradient should be a dotted one (similar to dotted border).
I should be able to set the height of each color. For example, if I want the 30% of the height of the gradient to be gray, the rest of the 70% should be set to green. And there shouldn't be a spread of the color(not sure of the right term).
Any clues on how this can be achieved via CSS only.
I have tried the following code with no success, just pasting it for reference.
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 700px;
width: 10px;
background-image: linear-gradient(180deg, transparent, transparent 50%, #fff 50%, #fff 50%), linear-gradient(180deg, orange 25%, black 75%);
background-size: 100% 20px, 100% 700px;
}
</style>
</head>
<body>
<h1>Linear Gradient - Top to Bottom</h1>
<p>This linear gradient starts red at the top, transitioning to yellow at the bottom:</p>
<div id="grad1"></div>
</body>
</html>
You could paint the vertical line n% in lime and then 100% - n% in gray.
Then overlay that with a repeating linear gradient of transparent and white.
.line {
height: 700px;
width: 10px;
background-image: linear-gradient(transparent 0 50%, white 50% 100%), linear-gradient(lime 0 71%, gray 71% 100%);
background-size: 100% 10%, 100% 100%;
}
<div class="line"></div>
You can use mask and gradient like below:
.line {
height: 300px;
width: 20px;
-webkit-mask: radial-gradient(circle closest-side, #000 96%, #0000) 0 0/100% 10%;
background: linear-gradient(red 60%, blue 0);
}
<div class="line"></div>
Looking for the code to make this particular shape with CSS..
Any help much appreciated!
You can do it with some rotation and perspective:
.box {
width: 150px;
height: 120px;
background: #f540a8;
margin: 20px;
transform: perspective(180px) rotateX(15deg) rotateY(20deg) rotateZ(-3deg);
}
<div class="box">
</div>
Or using SVG:
<svg viewBox="0 0 200 200" width=200>
<polygon points="20,0 150,20 170,130 0,150" fill="#f540a8" />
</svg>
And also using gradient (but without transparency):
.box {
width: 150px;
height: 120px;
background:
linear-gradient(to top right, transparent 46%,#fff 50%) right/10px 100%,
linear-gradient(to top right, transparent 46%,#fff 50%) top/100% 10px,
linear-gradient(to bottom right, transparent 46%,#fff 50%) bottom/100% 10px,
linear-gradient(to top left, transparent 46%,#fff 50%) left/10px 100%,
#f540a8;
background-repeat:no-repeat;
margin: 20px;
}
<div class="box">
</div>
You can use clip-path.
The clip-path CSS property creates a clipping region that defines
what part of an element should be displayed. More specifically, those
portions that are inside the region are shown, while those outside are
hidden.
Try this code snippet.
div{
width: 150px;
height: 150px;
-webkit-clip-path: polygon(5% 7%, 91% 14%, 98% 91%, 0% 100%);
clip-path: polygon(5% 7%, 91% 14%, 98% 91%, 0% 100%);
background: pink;
}
<div></div>
you can use:
clip-path: polygon(30px 0 , 250px 0, 200px 300px, 0 0);
Please see the example here: https://codepen.io/shakogele/pen/ZMZGGK
I am trying to apply a radial-gradient circle with dimensions on top of a background image in css. Whenever I apply the gradient line, it doesn't do anything - my layers appear to be out of order.
/* HTML Styles */
html {
background-image: url("image1.jpg");
background-attachment: fixed;
}
/* Body Styles */
body {
background-image: url("image2.jpg");
background: radial-gradient(circle closest-corner at 40% 70%, white 15%,
rgba(151, 151, 151, 0.5) 50%);
}
You need to append them in the same background property as with your code you are overriding the first background-image and only the gradient is considered. Also be sure you respect the order, the first one will be the top layer.
body {
margin:0;
height:100vh;
background:
radial-gradient(circle closest-corner at 40% 70%, white 15%, rgba(151, 151, 151, 0.5) 50%),
url("https://lorempixel.com/400/200/") center/cover;
}
You can also use this syntax (the above one is the shorthand):
body {
margin:0;
height: 100vh;
background-image:
radial-gradient(circle closest-corner at 40% 70%, white 15%, rgba(151, 151, 151, 0.5) 50%),
url("https://lorempixel.com/400/200/");
background-size: auto, cover;
background-position:center;
}
I've got this working using a static black background on my games splash screen:
[
If too small: http://i.imgur.com/VzLViDB.png
As you can see it works on a black background, but when we are on any other background, we simply see black instead of the actual background.
This makes sense, because I'm using a gradient like:
#waves::before {
left:0;
background: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 35%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 75%);
}
#waves::after {
right:0;
background: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 35%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 75%);
}
Soo... technically it's working as intended. I just can't figure out how to do it like I want it to work.
My goal: fade out the div so that the waveform corners appear to fade out.
How i attempted it: waves is a div, so I leveraged before and after psuedo-elements, and gave it a width LARGER than required (so there is some overlap), and then used a gradient to fade.
If anyone knows how to do this, that would be great!
I did search, which is where I got the idea of a gradient from. I couldn't find anything that would suit this use case (multiple backgrounds)
To clarify, this is my goal:
Since your image is mostly black, You can use a mix mode to overlay it over the background.
And keep the way you mask it with black on the sides
.bkg {
width: 100%;
height: 300px;
background-image: url(http://lorempixel.com/400/200);
background-size: cover;
}
.overlay {
width: 100%;
height: 100px;
position: absolute;
top: 200px;
background-image: linear-gradient(to right, black, transparent), linear-gradient(to left, black, transparent), url(https://i.stack.imgur.com/hhk0G.png);
background-size: 20% 100%, 20% 100%, cover;
background-position: left center, right center, center center;
background-repeat: no-repeat;
mix-blend-mode: screen;
}
<div class="bkg"></div>
<div class="overlay"></div>
I have fixed a similar problems with diagonal gradient.
Now it's difficult with linear.
I was able to create a gradiet with a cross
background: linear-gradient(to right, transparent 40%,#f00 50%,transparent 60%),
linear-gradient(to bottom, #fff 20%,#f00 50%,#fff 80%);
I can't create a gradient that have in the left half a gradient to bottom WHITE-RED and in the right half an inverse gradient RED-WHITE.
The below is the way I had tried to create it:
background: linear-gradient(to bottom, transparent 50%,#ff0 100%),
linear-gradient(to right, transparent 50%,#f00 100%);
But the yellow part is full! How can I fix this situation?
This is what I want:
It is very much possible to achieve this using a single element and a single background rule. Just give each of the gradients 50% size of the container in the X-axis, position one gradient on the left side and the other on right side using background-position and stop the gradient from repeating by setting the value for background-repeat as no-repeat.
div {
height: 100px;
background: linear-gradient(to top, red 10%, yellow 50%), linear-gradient(to bottom, red 10%, yellow 50%);
/* background-size: 50% 100%; Ideally this should be enough but it leaves a white line in the middle in snippet for some reason and so use below setting */
background-size: 50% 100%, calc(50% + 1px) 100%;
background-position: 0% 0%, 100% 0%;
background-repeat: no-repeat;
}
<div></div>
Edit: It is possible with one background, see Harry's answer.
It's not directly possible with a single background rule on your element, but you can utilize the ::before and ::after pseudo elements.
div {
width: 100%;
height: 50px;
border: 1px solid black;
position: relative;
background: linear-gradient(to bottom, red 0%, #ff0 100%);
}
div::before {
content: "";
position: absolute;
left: 50%;
right: 0;
top: 0;
bottom: 0;
background: linear-gradient(to top, red 0%, #ff0 100%);
}
<div></div>