Photoshop Question posted in
The official user guide can be found here.

css motion blur effect for horizontal bar – Photoshop

I have a little problem for converting a photoshop design to css :

desired effect : (done with photosohp, drop shadow + motion blur effect)
enter image description here

current effect (css) :
enter image description here

css for current effect : 

.horizontal_separator {
    height: 1px;
    display : block;
    border: 0;
    border-top: 1px solid #100f0b;
    margin: 1em 0;
    padding 0;
    box-shadow: 0px -1px 0px #2c2626;
}
Tags:

2

Answers


  1. 0

    @karim I’ve created a fiddle please check https://jsfiddle.net/3kn7vxk1/2/

    .horizontal_separator {
  position: relative;
  height: 1px;
  display: block;
  border: 0;
  background: -moz-linear-gradient(left, rgba(125, 185, 232, 0) 0%, rgba(16, 15, 11, 1) 100%);
  background: -webkit-linear-gradient(left, rgba(125, 185, 232, 0) 0%, rgba(16, 15, 11, 1) 100%);
   background: linear-gradient(to right, rgba(125, 185, 232, 0) 0%, rgba(16, 15, 11, 1) 100%);
   filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#007db9e8', endColorstr='#100f0b', GradientType=1);
  margin: 1em 0;
   padding 0;

    }

    Login or Signup to reply.
  2. 0

    You could use css gradients to achieve this. heres a JSFiddle

    With your css being:

    .horizontal_separator {
    height: 3px;
    display : block;
    border: 0;
    background: -webkit-linear-gradient(left, #666, #000, #666);
    background: -moz-linear-gradient(left, #666, #000, #666);
    background: -o-linear-gradient(left, #666, #000, #666);
    background: linear-gradient(to right, #666, #000, #666);
    margin: 1em 0;
    padding 0;
    box-shadow: 0px -1px 0px #333;
    filter: blur(1px);
    -webkit-filter: blur(1px);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search