create a fantasy border or a line with css

Question

I have a font icon and it has a border bottom (or a line doesn't matter) like this

I try to create something like this but I can't. I used radial-gradient to achieve it but I don't know if I did the right approach or not.

it is the code

  background-image: radial-gradient(circle at 49% 0%, #fafafa, #fff 100%);
  width: 100px;
  height: 1px;

thanks in advance for any effort or suggesting useful links

Answer 1

You can simply use a linear gradient from left to right. The sides are transparent and the middle is non-transparent(#fff).

width: 100px;
height: 1px;
background-image: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 0) 100%
);

You can use more breakpoints in linear-gradient if more precision is needed.