Glowing Border. Делаем красивый border у блока CSS, HTML

HTML

<div class="box">
  <div class="content">
    <h1>Glowing Border</h1>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam eaque alias ex nihil provident eos aliquid quos
      deserunt culpa praesentium obcaecati natus hic repudiandae autem, vel cum minus. Beatae, cupiditate!Velit minus.
    </p>
  </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #060c21;
  font-family: 'Poppins', sans-serif;
}

.box {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #060c21;
  max-width: 300px;
}

.box::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: #fff;
  z-index: -1;
}

.box::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: #fff;
  z-index: -2;
  filter: blur(40px);
}

.box::before,
.box::after {
  background: linear-gradient(235deg, #89ff00, #060c21, #00bcd4);
}

.content {
  padding: 20px;
  box-sizing: border-box;
  color: #ffffff;
}

Источник
Оцените статью
( Пока оценок нет )
Поделишься в соц. сетях? 🙂 Спасибо 🙏
Devtutor
Добавить комментарий