htmlcsscss-gradients

Rounded borders that look like the image attached


I don't have a clue how to create these 3d looking borders. The borders have a green gradient going into transparent. The green used is #2CA05A. The border-radius is 30px.

Card with gradient borders on top and bottom

This is what I have:

.new-feature-card {
  box-sizing: border-box;
  position: relative;
  width: 345px;
  height: 207px;
  background: linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(44, 160, 90, 0.1) 50%,
    rgba(0, 0, 0, 0.1) 100%
  );
  backdrop-filter: blur(8px);
  border-radius: 30px;
  border-style: inset;
}

Solution

  • Here is one way of doing it:

    .container {
      background-image: linear-gradient(to bottom right, #2CA05A, #002d1f, #002d1f, #002d1f, #2CA05A);
      padding: 3px 0;
      border-radius: 10px;
    }
    
    .card {
      background-color: #002d1f;
      padding: 10px;
      border-radius: 10px;
      color: #fff;
    }
    <div class="container">
      <div class="card">
        <p>3D borders</p>
      </div>
    </div>

    Just set the desired linear-gradient points, colors and border radius.

    https://codepen.io/unjica-the-sans/pen/PwwLLxN