Anyhow know how I can go about creating a background animation like this with CSS?
You can create two absolute html elements and align them left and right accordingly. Then you can apply CSS radial gradient on these elements for example: background: radial-gradient(45% 45% at 50% 50%, rgba(77, 230, 219, 0.2) 0%, rgba(77, 230, 219, 0) 100%); Otherwise, you can use pseudo-elements (:after, :before) instead of HTML tags.
Here is a quick sketch of what you can do:
.hero {
height: 100vh;
width: 100vw;
background-color: #000;
position: relative;
}
.hero:after,
.hero:before {
content: '';
background: radial-gradient(45% 45% at 50% 50%, rgba(77, 230, 219, 0.2) 0%, rgba(77, 230, 219, 0) 100%);
display: block;
position: absolute;
}
.hero:before {
left: -100px;
bottom: 0;
width: 300px;
height: 300px;
}
.hero:after{
right: -100px;
top: 0;
width: 300px;
height: 300px;
}
<div class="hero"></div>
To make life easier, you can use CSS Gradient Generators, such as: https://cssgradient.io/
Related
I'm having a weird Firefox-only issue where a transparent line appears on every color-stop in the gradient. Does anyone know why this is happening?
HTML
<section class="hero">
<picture>
<img src="https://api.lorem.space/image/furniture?w=1500&h=1500" alt="">
</picture>
</section>
SCSS
.hero {
height: 100vh;
}
picture {
position: absolute;
width: 50%;
left: 0;
height: 100%;
z-index: 0;
&::after {
position: absolute;
left: 0;
bottom: 0;
height: 100vh;
width: 40rem;
background: linear-gradient(0deg, rgba(0,173,164,1) 0%, rgba(119,205,135,1) 50%, rgba(119,205,135,1) 60%, rgba(119,205,135,1) 75%, rgba(224,233,110,1) 100%);
transform: skew(-27deg);
content: '';
}
img {
height: 100%;
}
}
Demo
Codepen demo
Image
The problem on Firefox seems to arise because of the calculations it is having to do to accommodate the skew (one CSS pixel maps to several screen pixels on modern screens so there have to be decisions about how to split things when there is a fraction needed).
This snippet takes a different approach - having the linear-gradient going just from top to bottom over the whole element and then using clip path to show the bit you want.
Obviously you will want to play with the polygon x y coordinates to get what you want, but this approach has an additional advantage that it is more responsive - moving to a smaller viewport does not let the stripe cover a large amount of the underlying image.
<!doctype html>
<html>
<head>
<style>
.hero {
height: 100vh;
}
picture {
position: absolute;
width: 50%;
left: 0;
height: 100%;
z-index: 0;
margin: 0;
}
picture::after {
position: absolute;
left: 0;
bottom: 0;
height: 100%;
width: 100%;
background: linear-gradient(0deg, rgba(0, 173, 164, 1) 0%, rgba(119, 205, 135, 1) 50%, rgba(119, 205, 135, 1) 60%, rgba(119, 205, 135, 1) 75%, rgba(224, 233, 110, 1) 100%);
content: '';
margin: 0;
clip-path: polygon(0 60%, 20% 0, 50% 0, 20% 100%, 0 100%);
}
picture img {
height: 100%;
}
</style>
</head>
<body>
<section class="hero">
<picture>
<img src="https://api.lorem.space/image/furniture?w=1500&h=1500" alt="">
</picture>
</section>
</body>
</html>
Essentially, I want to create an element that combines a "to right" gradient with a color stop at a certain percentage and another color stop for the remaining width with a "to bottom" gradient that fades both colors to transparent. Getting the color stop part is easy, getting the fade is easy; I just can't figure out how to get both.
/*I can get this:*/
div {
width: 500px;
height: 100px;
}
.color-change {
background: linear-gradient(to right, rgb(255, 175,157) 80%, rgb(255, 95, 89) 80%);
}
/*or this:*/
.fade {
background:linear-gradient(to bottom, rgba(252, 193, 176, 0), #fcc1b0);
/* but not both*/
<div class="color-change"></div>
<div class="fade"></div>
This probably isn't hard but I can't find any examples that do exactly this. I could just use a png., but it seems as though this ought to be doable in CSS. Thanks for any suggestions (or better, solutions).
Use CSS ::before (:before)
In CSS, ::before creates a pseudo-element that is the first child of
the selected element. It is often used to add cosmetic content to an
element with the content property. It is inline by default. https://developer.mozilla.org
div {
width: 500px;
height: 100px;
}
.fade {
background: linear-gradient(to bottom, rgba(252, 193, 176, 0), #fcc1b0);
position: relative;
}
.fade::before {
display: inline-block;
content: "";
height: 100%;
width: 20%;
background: black;
position: absolute;
right: 0;
background: linear-gradient(0deg, rgba(246,115,115,1) 4%, rgba(250,192,194,1) 34%, rgba(255,233,234,1) 66%, rgba(255,255,255,1) 100%);
}
<div class="fade"></div>
Multiple background layer can do it:
.color-change {
--p:80%; /* this is your percentage */
background:
linear-gradient(to bottom, transparent, #fcc1b0) left,
linear-gradient(to bottom, transparent, rgb(255, 95, 89)) right;
background-repeat:no-repeat;
background-size:var(--p) 100%,calc(100% - var(--p)) 100%;
width: 500px;
height: 100px;
margin:10px;
}
<div class="color-change"></div>
<div class="color-change" style="--p:50%"></div>
<div class="color-change" style="--p:20%"></div>
Or you can mask it with a pseudo element. This is real transparent.
body {
background: dodgerblue;
}
div {
width: 500px;
height: 100px;
}
.color-change {
-webkit-mask: linear-gradient(to bottom, transparent, #000);
mask: linear-gradient(to bottom, transparent, #000);
position: relative;
}
.color-change:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgb(255, 175, 157) 80%, rgb(255, 95, 89) 80%);
}
<div class="color-change"></div>
I want that the parts that are "whited" to get the image blurred.
I've tried using pseudo elements ::after and ::before to add the overlays but could only blurred the overlay.
tried with borders 2nd example codepen, but no sucess because with the transparent it creates a "square".
https://codepen.io/giventofly/pen/RQpqYZ
.hero-image {
width: 1280px;
height: 800px;
background-image: linear-gradient(rgba(46, 51, 82, 0.6) 100%, transparent 0), linear-gradient(125deg, rgba(255, 255, 255, 0.5) 35%, transparent 0), linear-gradient(-55deg, rgba(255, 255, 255, 0.5) 25%, transparent 0),
url('https://cdn.vox-cdn.com/thumbor/NU6lcSN3DGmjF7NhZp6ixY3HxgQ=/0x0:1620x1080/1200x800/filters:focal(0x0:1620x1080)/cdn.vox-cdn.com/uploads/chorus_image/image/46510678/Tarmogoyf_DGM_1920x1080_Wallpaper.0.0.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 10;
}
<div class="hero-image"></div>
I only want to blur the part of the image that is "behind" the white linear-gradient
I'm sure someone can refine this approach a bit, but the main takeaways are:
Include the image twice in a container element.
Stack the two images.
Blur one and place it on the bottom.
Use clip-path on the top image to display the non-blurred region.
Insert a frost layer (transparent white) with a pseudo element of the container element between the two images.
Control layering with positioning and z-index.
.img-overlay {
display: inline-flex;
position: relative;
overflow: hidden;
}
.img-overlay::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba( 255, 255, 255, 0.5 );
z-index: 1;
}
.img-overlay img:first-child {
position: absolute;
top: 0;
left: 0;
filter: blur( 3px);
z-index: 0;
}
.img-overlay img:last-child {
position: relative;
z-index: 2;
-webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
<div class="img-overlay">
<img src="http://unsplash.it/400/400?image=16">
<img src="http://unsplash.it/400/400?image=16">
</div>
You can use clip-path for this. The idea is to have two similar layer, the top with the clip-path to show only the needed part and keep the blur on the bottom layer visible. You can switch the blur between both element if you want to blur the middle part instead:
.hero-image {
width: 600px;
height: 250px;
position: relative;
overflow: hidden;
}
.hero-image:after,
.hero-image:before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: center/cover no-repeat;
background-image:
linear-gradient(rgba(46, 51, 82, 0.6) 100%, transparent 0),
linear-gradient(125deg, rgba(255, 255, 255, 0.5) 35%, transparent 0),
linear-gradient(-55deg, rgba(255, 255, 255, 0.5) 25%, transparent 0),
url('https://picsum.photos/id/1024/800/800');
}
.hero-image:before {
filter: blur(4px);
}
.hero-image:after {
clip-path: polygon(45% 0, 97% 0, 68% 100%, 16% 100%);
}
<div class="hero-image"></div>
I want to css code with gradient top transparent color. can you please check below is it correct.?
background-color: transparent;
background-image: linear-gradient(to top, #f2f2f2, rgba(242, 242, 242, 0));
bottom: 0;
content: " ";
display: block;
height: 150px;
position: absolute;
width: 100%;
z-index: 8;
I suggest you to use just background property for your purpose if i undetstood it correctly.
.example {
background: linear-gradient(to top, #f2f2f2, rgba(242, 242, 242, 0));
}
Cause you use second color with opacity: 0 (last parameter in the rgba function) you'll have gradient effect to transparent.
I'm trying to use transition in my SCSS file but it doesn't seem to work. I know that gradient is sometimes not supported, so I make "bg-gradienter" to create a background and hope to use it for the transition. However, this code still doesn't work. I also add width: 50%; as a debugger; the transition works well on width.
&::after {
#include bg-gradienter (( to bottom left, rgba(6, 55, 105, 0.25) 25%, rgba(8, 57, 106, 1) 100%));
top: 0;
left: 0;
width: 100%;
height: 100%;
content:"";
position: absolute;
transition: all 2s ease-in-out;
}
&:hover:after {
width: 50%;
#include bg-gradienter (( to bottom left, rgba(6, 55, 105, 0.75) 25%, rgba(8, 57, 106, 1) 100%));
transition: all 2s ease-in-out;
}
Here is my bg-gradienter:
#mixin bg-gradienter($args) {
background: -moz-linear-gradient($args), no-repeat;
background: -webkit-linear-gradient($args), no-repeat;
background: -o-linear-gradient($args), no-repeat;
background: -ms-linear-gradient($args), no-repeat;
background: linear-gradient($args), no-repeat;
}
Any ideas? Thanks a lot!
Change $args to $args... which will allow you to include commas in your argument to bg-gradienter:
#mixin bg-gradienter($args...) {
background: -moz-linear-gradient($args), no-repeat;
background: -webkit-linear-gradient($args), no-repeat;
background: -o-linear-gradient($args), no-repeat;
background: -ms-linear-gradient($args), no-repeat;
background: linear-gradient($args), no-repeat;
}
and remove the extra parentheses around your arguments in the #include