Как добавить розовые границы

Рейтинг: -1Ответов: 2Опубликовано: 21.02.2023

Нужно сделать розовый border элементу, как на картинке приведенной ниже:

width: 316px;
height: 380px;
background: linear-gradient(360deg, #16181B 0%, rgba(22, 24, 27, 0) 70.26%);
box-shadow: 0px 16px 16px rgba(0, 0, 0, 0.16);
border-radius: 16px;
css
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Принцип заложил, а цвета и тд думаю сами подберёте

* {
  box-sizing: border-box;
}

.wrapper {
  padding: 50px;
  background: black;
  color: white;
}

.card {
  width: 316px;
  height: 380px;
  position: relative;
  border-radius: 16px;
  display: flex;
}

.background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, 
    rgba(255,255,255,0) 29%, 
    rgba(103,255,51,1) 61%, 
    rgba(241,2,135,1) 100%
  );
  border-radius: 16px;
}

.container {
  margin: auto;
  position: relative;
  z-index: 1;
  width: 308px;
  height: 374px;
  box-shadow: 0px 16px 16px rgba(0, 0, 0, 0.16);
  border-radius: 16px;
  background: black;
  padding: 20px;
}

.image {
  max-width: 100%;
}
<div class="wrapper">
  <div class="card">
    <div class="background"></div>
    <div class="container">
      <img class="image" src="https://rare-gallery.com/uploads/posts/1056046-cat-animals-yellow-eyes-nose-whiskers-kitten-mammal-vertebrate-close-up-cat-like-mammal-small-to-medium-sized-cats-tabby-cat-domestic-short-haired-cat-european-shorthai.jpg">
      <h3>some title</h3>
    </div>
  </div>
</div>

UPD
Можете воспользоваться градиент генератором, например https://cssgradient.io/

▲ 1

Мой вариант:

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&family=Roboto:wght@100&display=swap');
body {
  display: grid;
  background-color: rgb(45, 59, 67);
}

.wrapper {
  display: grid;
  background-color: rgb(35, 43, 59);
  width: 200px;
  height: 300px;
  border-width: 3px;
  border-style: solid;
  border-image: linear-gradient(to bottom, transparent, rgb(37, 107, 247), rgb(220, 2, 195))1;
  margin: 0 auto;
  -webkit-box-shadow: 0px 32px 58px -16px rgba(102, 242, 242, 0.31);
  -moz-box-shadow: 0px 32px 58px -16px rgba(102, 242, 242, 0.31);
  box-shadow: 0px 32px 58px -16px rgba(102, 242, 242, 0.31);
  Copy Text
}

.content {
  color: rgb(212, 213, 215);
  font-size: 30px;
  font-weight: 900;
  font-family: 'Oswald', sans-serif;
  justify-self: center;
  align-self: center;
}
<div class="wrapper">
  <div class="content">200x300</div>
</div>