Question 243981 in Html Question posted in
Some basic documentation can be found here.

Html – "Line Dripping" effect with css

Very Cool Line

I’m trying to create this line. And actually I did. I’m just wondering is there a better way to achieve this effect? Thank you in advance.

Here is my current code.

.blue-line-1 {
  position: relative;
  margin: 250px auto 0;
  width: 222px;
  height: 24px;
  transform: rotate(90deg);
  flex-shrink: 0;
  border-radius: 2.375rem;
  background: linear-gradient(135deg, #61AAFF 0%, #32EBCA 100%);
}

.blue-line-2 {
  position: relative;
  margin: 150px auto 0;
  width: 80px;
  height: 24px;
  transform: rotate(90deg);
  flex-shrink: 0;
  border-radius: 2.375rem;
  background: linear-gradient(135deg, #61AAFF 0%, #32EBCA 100%);
}

.blue-line-3 {
  position: relative;
  margin: 50px auto 50px;
  width: 30px;
  height: 24px;
  transform: rotate(90deg);
  flex-shrink: 0;
  border-radius: 2.375rem;
  background: linear-gradient(135deg, #61AAFF 0%, #32EBCA 100%);
}
<div>
  <div class="blue-line-1">
  </div>
  <div class="blue-line-2">
  </div>
  <div class="blue-line-3">
  </div>
</div>
Tags:

2

Answers


  1. 0

    One element can do it:

    .line {
  width: 40px; /* width of all lines*/
  padding-top: 150px; /* height of first line */
  height: 0; /* don't touch this, it will push the lines outside */
  border-radius: 999px; /* a big pixel value */
  background: linear-gradient(45deg, #61AAFF, #32EBCA); /* your gradient */
}
.line:before,
.line:after {
  content: "";
  display: block;
  background: inherit;
  border-radius: inherit;
  margin-top: 10px; /* the gap between lines*/
}
.line:before {
  height: 80px; /* height of second line */
}
.line:after {
  height: 50px; /* height of third line */
}
    <div class="line"></div>
    Login or Signup to reply.
  2. 0

    Here is a better and easier way!

    .line {
  position: relative;
  margin: auto;
  width: 30px;
  height: 24px;
  transform: rotate(90deg);
  flex-shrink: 0;
  border-radius: 2.375rem;
  background: linear-gradient(135deg, #61AAFF 0%, #32EBCA 100%);
}

.line-1 {
  margin-top: 250px;
  width: 100px;
}

.line-2 {
  margin-top: 200px;
  width: 200px;
}

.line-3 {
  margin-top: 200px;
  width: 100px;
}

    <div>
  <div class="line line-1"></div>
  <div class="line line-2"></div>
  <div class="line line-3"></div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search