Я новичок в программировании.

Можно ли создать градиент как фон для этого дизайна используя sass или css? Я хочу разместить несколько цветов в случайных местах.

Заранее спасибо.

0
Yart 8 Июл 2021 в 10:09

3 ответа

Лучший ответ

Да, вы можете, добавив несколько градиентов к вашему свойству background W3scool doc

.container {
  height: 100vh;
  background:
    radial-gradient(circle at 10% 20%, #FF000070 2%, transparent 40%),
    radial-gradient(circle at 70% 40%, #BADA5570 4%, transparent 10%),
    radial-gradient(ellipse at 50% 80%, #BADA5570 7%, transparent 30%);
}
<div class="container"></div>
3
Charles Lavalard 8 Июл 2021 в 08:11

Да, подобного эффекта можно добиться.

Вы можете складывать градиенты, разделяя их запятыми. «Белый» цвет должен быть прозрачным, чтобы вы могли видеть сквозь самые верхние градиенты.

Взгляните на этот градиент:

div {
  background: 
    radial-gradient(circle at 10px 30px, rgb(2, 0, 36) 0%, rgb(7, 6, 97) 31%, rgba(9, 9, 121, 0) 46%, rgba(0, 212, 255, 0) 100%),
    radial-gradient(circle at 600px 400px, rgb(200, 0, 36) 0%, rgb(200, 6, 97) 31%, rgba(9, 9, 121, 0) 46%, rgba(0, 212, 255, 0) 100%);
  width: 400px;
  height: 400px;
}
<div></div>
1
user3637541 8 Июл 2021 в 07:28

Глассморфизм - это название эффекта. Посетите этот сайт. Glassmorphism

.container{
  background: rgba( 255, 255, 255, 0.25 );
  box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
  backdrop-filter: blur( 10px );
  -webkit-backdrop-filter: blur( 4.0px );
  border-radius: 10px;
  border: 1px solid rgba( 255, 255, 255, 0.18 );
  width:100%;
  height:100vh;
  z-index:999;
}
.circle1{
  position:absolute;
  top:10px;
  left:20px;
  height:100px;
  width:100px;
  background:red;
  opacity: 0.5;
  border-radius:50%;
  z-index:-1;
}

.circle2{
  position:absolute;
  bottom:10px;
  right:20px;
  height:250px;
  width:250px;
  opacity: 0.5;
  background:blue;
  border-radius:50%;
  z-index:-1;
}
<div class="container"></div>
  <div class="circle1"></div>
  <div class="circle2"></div>
0
Mohamed Sakeel 8 Июл 2021 в 07:49