Obtain blur with soft edges - html

I applied this code to make the content underneath a div blurry, but the edge is very sharp.
z-index: 10;
backdrop-filter: blur(10px);
background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(255,255,255,0) 10%, rgba(174,174,174,0) 15%, var(--bg-color) 85%);
Can I create something like a blur gradient to soften the edge and make the blur gradually disappear?


To make Tilt-Shift effect for backdrop-filter in CSS, You have to use the mask-image attribute like the code below:
CSS:
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
-webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, black 20%, black 100%);
mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, black 20%, black 100%);
You can change the position of tilting by percent, but I think this config is exactly what you need.
.menu{
color: white;
position: sticky;
display: flex;
place-content: space-evenly;
align-items: center;
height: 80px;
}
.menu:before {
content: '';
height: 80px;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px);
-webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, black 40%, black 100%);
mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, black 40%, black 100%);
}
body{
width: 100%;
height: 100vh;
background: url("https://images.unsplash.com/photo-1444080748397-f442aa95c3e5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8M3x8fGVufDB8fHx8&w=1000&q=80");
background-repeat: no-repeat;
background-size: cover;
margin: 0;
}
<body>
<div class="menu">
<span>Home</span>
<span>About</span>
<span>Contact</span>
</div>
</body>

Related

How to apply a gradient to an (fixed width) image that is responsive?

I'm not sure how to explain my question. So here's a fiddle:
https://jsfiddle.net/8zsqydj0/
.background-img-wrapper:before {
content: "";
top: 0;
left: 0;
position: absolute;
height: 100%;
width: 100%;
background: linear-gradient(to right, rgba(252, 252, 252, 1) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, rgba(252, 252, 252, 1) 100%);
}
.background-img-wrapper {
max-width: 1920px;
}
.background:before {
content: "";
top: 0;
left: 0;
position: absolute;
height: 100%;
width: 100%;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 80%, rgba(252, 252, 252, 1) 100%);
}
.background {
width: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="row justify-content-center position-fixed background">
<div class="background-img-wrapper">
<img class="img-fluid" src="https://via.placeholder.com/1920x1080/000000/" />
</div>
</div>
I'm trying to apply a gradient to three sides of the image. That far I got. However, the image is centered on the page and has a fixed (max) width of 1920px. The gradient is applied to a parent div that is 100% of the page and the image is img-fluid. So, when the gradient is viewed on a resolution of 1920px or lower everything looks fine. However, when you resize the page above a width of 1920px, the gradient moves with the side of the window instead of staying fixed at the sides of the image. If that makes sense.
So, how to apply the gradient to the image instead of the parent div, or how to limit the sides of the gradient to the image size? I'm using Bootstrap 4.
Also, I don't necessarily need to keep the current structure. If there's a better way to achieve all this please do let me know :)

I will replace 1920px with a smaller value so we can better see the result
An easy fix would be to add position:relative and adjust z-index like below:
.background-img-wrapper:before {
content: "";
top: 0;
left: 0;
position: absolute;
height: 100%;
width: 100%;
background: linear-gradient(to right, rgba(252, 252, 252, 1) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, rgba(252, 252, 252, 1) 100%);
}
.background-img-wrapper {
max-width: 400px;
position:relative; /* added */
}
.background:before {
content: "";
top: 0;
left: 0;
position: absolute;
z-index:1; /* added */
height: 100%;
width: 100%;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 80%, rgba(252, 252, 252, 1) 100%);
}
.background {
width: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" >
<div class="row justify-content-center position-fixed background">
<div class="background-img-wrapper">
<img class="img-fluid" src="https://via.placeholder.com/400x300/000000/"/>
</div>
</div>
Or simplify your code like below:
.background:before {
content: "";
top: 0;
left: 0;
position: absolute;
height: 100%;
width: 100%;
background:
linear-gradient(to bottom, transparent 80%, #fff 100%),
linear-gradient(to right, #fff 0%, transparent 20% 80%, #fff 100%);
}
.background {
max-width: 400px;
left:0;
right:0;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" >
<div class="position-fixed background m-auto">
<img class="img-fluid" src="https://via.placeholder.com/400x300/000000/"/>
</div>
If the ratio of the image will always be the same you can still simplify:
.background:before {
content: "";
padding-top:calc(300/400 * 100%); /* Height/width */
}
.background {
max-width: 400px;
left:0;
right:0;
background:
linear-gradient(to bottom, transparent 80%, #fff 100%),
linear-gradient(to right, #fff 0%, transparent 20% 80%, #fff 100%),
url(https://via.placeholder.com/400x300/000000/) center/cover;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" >
<div class="position-fixed background m-auto d-flex">
</div>

how can I make diagonal lines with css

I'm trying to create a diagonal line with CSS, like the following image, but I have no idea how to do it.
Could you guide me how to do it?
.container {
position: relative;
background: #632878;
background: -moz-linear-gradient(-45deg, #632878 9%, #862453 56%, #a83a39 100%);
background: -webkit-linear-gradient(-45deg, #632878 9%, #862453 56%, #a83a39 100%);
background: linear-gradient(135deg, #632878 9%, #862453 56%, #a83a39 100%);
background-repeat: repeat;
width: 200%;
height: 100vh;
background-attachment: fixed;
overflow: hidden;
}
.container:before {
content: '';
position: absolute;
left: 1%;
width: 20%;
height: 160%;
background-color: rgb(255, 255, 255);
/* fallback */
background-color: rgba(255, 255, 255, 0.5);
top: 0;
-webkit-transform: rotate(55deg);
-moz-transform: rotate(55deg);
transform: rotate(55deg);
}
<div class="container">
<!-- Content... -->
</div>

You can consider multiple background. Here is an example:
.container {
margin: 0;
background:
linear-gradient(to top right, transparent 49.5%, rgba(255, 255, 255, 0.5) 50%) 50% calc(50% + 60px/2 + 80px/2)/100% 80px,
linear-gradient(to bottom right,transparent 49.5%, rgba(255, 255, 255, 0.5) 50%) 50% calc(50% - 60px/2 - 120px/2)/100% 120px,
linear-gradient(rgba(255, 255, 255, 0.5),rgba(255, 255, 255, 0.5)) center/100% 60px,
linear-gradient(135deg, #632878 9%, #862453 56%, #a83a39 100%);
background-repeat: no-repeat;
height: 400px;
width:400px;
overflow: hidden;
}
<div class="container">
</div>
Or clip path like below:
.container {
margin: 0;
background:
linear-gradient(135deg, #632878 9%, #862453 56%, #a83a39 100%);
background-repeat: no-repeat;
height: 400px;
width:400px;
position:relative;
}
.container::before {
content:"";
position:absolute;
top:80px;
bottom:50px;
left:0;
right:0;
background:rgba(255, 255, 255, 0.5);
-webkit-clip-path: polygon(0 31%, 100% 0, 100% 100%, 0 75%);
clip-path: polygon(0 31%, 100% 0, 100% 100%, 0 75%);
}
<div class="container">
</div>
Another idea with rotation and perspective:
.container {
margin: 0;
background:
linear-gradient(135deg, #632878 9%, #862453 56%, #a83a39 100%);
background-repeat: no-repeat;
height: 400px;
width:400px;
position:relative;
overflow:hidden;
}
.container::before {
content:"";
position:absolute;
top:140px;
bottom:120px;
left:0;
right:0;
background:rgba(255, 255, 255, 0.5);
transform:perspective(200px) rotateY(-25deg);
transform-origin:left;
}
<div class="container">
</div>

CSS gradient to create two different color design

I am trying to create a specific shape with specific color to keep it as a background. I successfully created gradient color that I want but I am struggling with getting shape right.
Here is what I have done and what is am trying to achieve,
My Work :
Expectation :
Code :
.grad {
height: 400px;
width: 900px;
background: linear-gradient(110deg, #62e6a5 50%, #9ae7ba 50%, #9ae7ba 52%, #d1f5de 52%, #d1f5de 0);
}
<div class="grad"></div>
I am open to use any other method as long as it is only one 'div'. I don't want to use two different div which are causing many issues in responsive design. I tried using clip-path but that too did not help because of the nature of the design.
Any help would be appreciated.

Use multiple gradient then adjust dimension and position to obtain what you want:
.grad {
height: 100px;
width: 300px;
background:
linear-gradient(110deg, #62e6a5 50%, #9ae7ba 50%, #9ae7ba 52%, #d1f5de 52%, #d1f5de 0) 0 0/100% calc(100% - 10px) no-repeat,
linear-gradient(110deg, #62e6a5 52%, transparent 0) 0 100%/100% 100% no-repeat;
}
<div class="grad"></div>

Use pseudo-elements like :before and :after
.grad{
position: relative;
height:200px;
width:450px;
margin-bottom: 10px;
background: linear-gradient(110deg, #62e6a5 50%, #9ae7ba 50%, #9ae7ba 52%, #d1f5de 52%, #d1f5de 0);
}
.grad-new{
position: relative;
height:200px;
width:450px;
margin-bottom: 10px;
overflow: hidden;
background: linear-gradient(110deg, #62e6a5 50%, #9ae7ba 50%, #9ae7ba 52%, #d1f5de 52%, #d1f5de 0);
}
.grad-new:before{
content: '';
position: absolute;
width: 3%;
height: 10px;
bottom: 0;
right: 55.6%;
background: #62e6a5;
transform: skew(-20deg);
}
.grad-new:after{
content: '';
position: absolute;
width: 100%;
height: 10px;
bottom: 0;
left: 44.4%;
background: #fff;
transform: skew(-20deg);
}
<div class="grad"></div>
<div class="grad-new"></div>

Background image bottom gradient with CSS3

I need this type gradient in the bottom of a background image
I can't figure out – how to I can make this type gradient with CSS. I've uploaded my code in jsFiddle.
.single-blog-bg {
background-size: cover;
background-attachment: fixed;
height: 350px;
position: relative;
}
.single-blog-bg:before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 300px;
bottom: 0;
background: linear-gradient(to bottom, white 10%, white 30%, white 60%, white 100%);
opacity: .5;
}
<div class="single-blog-bg" style="background-image: url(https://i.stack.imgur.com/VT8SR.jpg)"></div>
Here showing white gradient but not like what I expect.
Has there anybody who will help me to get the exact CSS code?

Add This Style to Image:
mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));

Use background: linear-gradient(to bottom, rgba(255,255,255,0), white 100%); for the bottom div.
I fork your jsfiddle here.

You can use the background like this.
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
Check the codepen here

Try changing css-
i have done for you
.single-blog-bg {
background-size: cover;
background-attachment: fixed;
height: 350px;
position: relative;
}
.single-blog-bg:before{
content: '';
position: absolute;
display: flex;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: linear-gradient(to bottom, rgb(0, 0, 0) 30%, rgb(255, 255, 255) 100%);
opacity: .5;
}
do check- https://codepen.io/djmayank/pen/vJyoVe

Have you tried using alpha in the color?
Change the gradient rule to something like this:
.single-blog-bg:before{
content: '';
position: absolute;
left: 0;
right: 0;
top: 100px;
bottom: 0;
background: linear-gradient(to bottom, rgba(255,255,255,0) 10%, rgba(255,255,255,0.9) 100%);
}
Edit: Remove the opacity property, change the bottom color alpha and give the effect more height

.single-blog-bg {
background-size: cover;
background-attachment: fixed;
height: 350px;
position: relative;
}
.single-blog-bg:before {
content: '';
position: absolute;
left: 0;
right: 0;
/*top: 300px*/
bottom: 0;
background: linear-gradient(to top, rgba(255, 255, 255, 0.95) 10%, rgba(255, 255, 255, 0.13) 60%, rgba(255, 255, 255, 0.04) 70%);
/* opacity: .5; */
height: 100%;
}
opacity: .5;
}
<div class="single-blog-bg" style="background-image: url(https://images.unsplash.com/photo-1495935225637-fa5838607df7?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=)">
</div>

Create a glossy light effect using CSS

I'm trying to create a light effect with CSS and HTML only. Just like this image
I don't know if it's possible. or how to do it.
Any help will be appreciated.
.circle {
border: 10px solid;
border-radius: 50%;
width: 200px;
height: 200px;
background-color: green;
}
<div class="circle"></div>

Here is my example
*,
*:before,
*:after {
box-sizing: border-box;
}
div {
width: 120px;
height: 120px;
border-radius: 60px;
background: linear-gradient(to bottom, #393939 0%, #151515 100%);
position: relative;
}
div:before {
content: '';
width: 106px;
height: 106px;
border-radius: 53px;
background: #19f000;
border: 1px solid black;
position: absolute;
left: 7px;
top: 7px;
}
div:after {
content: '';
width: 80px;
height: 60px;
border-radius: 50%;
background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
position: absolute;
transform: rotate(-18deg);
left: 13px;
top: 9px;
}
<div></div>
JSfiddle Demo

You can use a second div for the highlight to try and provide a stronger 3D effect, freeing up the box-shadow to be used for the darker contouring on the edges.
.circle {
width: 164px;
height: 164px;
background-color: #19f000;
border-radius: 100%;
position: relative;
border: 10px solid #444444;
box-shadow: 0 0 15px 0 rgba(0,0,0,.8) inset;
transform: rotate(-20deg);
}
.highlight {
position: absolute;
top: 2px;
right: 0;
left: 0;
margin: auto;
width: 80%;
height: 64%;
opacity: .92;
border-radius: 100%;
/* gratuitous gradient compatibility - activate! */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}
<div class="circle">
<div class="highlight"></div>
</div>

You can do with the combination of radial gradient and a pseudo element for glossy effect.
The transition from white to green can be produced through radial-gradient. The #fff color stops at 5%.
The glossy effect finish is given using the opacity on the pseudo element and has a similar shape of the parent with white background and reduced width.
JSfiddle Demo
.circle::after {
background: white none repeat scroll 0 0;
border-radius: 50%;
content: " ";
display: block;
height: 100px;
opacity: 0.15;
position: absolute;
width: 150px;
left: 20px;
}
.circle {
background-image: radial-gradient(ellipse at 50px 10px , #ffffff 0%, #fff 5%, #00ff00 100%);
border: 10px solid;
border-radius: 50%;
height: 200px;
position: relative;
width: 200px;
}
<div class="circle">
</div>

You can do it using a single element also by layering one radial-gradient image of the required size on top of an angled linear-gradient image and then positioning it appropriately. Multiple background images and layering has very good browser support (IE9+) but gradients are supported only in IE10+.
.circle {
border: 10px solid;
border-radius: 50%;
width: 200px;
height: 200px;
background: radial-gradient(ellipse at 90px 45px, rgba(255, 255, 255, 0.75) 10%, rgba(255,255,255,0.5) 30%, rgba(255,255,255,0) 32%, rgba(25,240,0,1) 45%), linear-gradient(160deg, transparent 12%, rgb(25, 240, 0) 30%);
background-size: 125% 80%, 100% 100%;
background-repeat: no-repeat;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="circle"></div>
Browser Compatibility Charts:
Multiple background images and layering
Gradients

<!doctype html>
<html>
<head>
<style>
.circle {
border:10px solid;
border-radius: 50%;
width: 200px;
height: 200px;
background: rgb(25,240,0); /* Old browsers */
background: -moz-linear-gradient(top, rgba(25,240,0,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(25,240,0,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(25,240,0,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(25,240,0,1) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(25,240,0,1) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to top, rgba(25,240,0,1) 0%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#19f000', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
</style>
<head>
<body>
<div class="circle">
</div>
</body>
</html>
Please use background gradient color as mentioned above. i hope this woould helpful to you
here is the working demo.Demo

Try box shadow like this: Updated Demo
Adjust the shadow values and background gradient colors according to your need.
.circle {
border:10px solid;
border-radius: 50%;
width: 200px;
height: 200px;
background: #f8ffe8;
background: url(data:image/svg+xml;
base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y4ZmZlOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE3JSIgc3RvcC1jb2xvcj0iIzU2YmM2YyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxOTliMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #f8ffe8 0%, #56bc6c 17%, #199b00 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f8ffe8), color-stop(17%, #56bc6c), color-stop(100%, #199b00));
background: -webkit-linear-gradient(top, #f8ffe8 0%, #56bc6c 17%, #199b00 100%);
background: -o-linear-gradient(top, #f8ffe8 0%, #56bc6c 17%, #199b00 100%);
background: -ms-linear-gradient(top, #f8ffe8 0%, #56bc6c 17%, #199b00 100%);
background: linear-gradient(to bottom, #f8ffe8 0%, #56bc6c 17%, #199b00 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8ffe8', endColorstr='#199b00', GradientType=0);
-webkit-box-shadow: inset -1px 60px 68px -28px rgba(255, 255, 255, 1);
-moz-box-shadow: inset -1px 60px 68px -28px rgba(255, 255, 255, 1);
box-shadow: inset -1px 60px 68px -28px rgba(255, 255, 255, 1);
}