Эффект свечения с тенью

#html #css #css3 #html5

У меня проблема со стилизацией объекта. Мне нужно создать эффект свечения с тенью
в нижней части окна. У меня не получается  создать такой эффект.  

Вот так должен выглядеть эффект свечения, который мне нужно создать: 

  

Я пытался создать этот эффект, но выглядит очень плохо  



html,
body {
  width: 100%;
  height: 100%;
  margin:0;
}

.container {
  background-color: black;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items:center;
}

.glow {
  width: 60%;
  height: 0px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 20px 0px yellow, 0 0 20px 10px #ffc600, 0px 0px 20px 0px yellow;
}

  





    

Ответы

Ответ 1

Можно апроксимировать это, используя фоновую окраску и некоторый фильтр: 



.glow {
  height:40px;
  margin:50px;
  background:
    radial-gradient(190px 20px,white, gold 15%,transparent 30%),
    linear-gradient(to right,transparent, gold,transparent) center/100% 5px no-repeat;
  border-radius:100%;
  position:relative;
  filter:blur(1px);
}
.glow:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:inherit;
  filter:blur(7px);
}

body {
 background:#000;
}





Источник


Ответ 2

Пример использования в оживлении длинного текста



Добавлен текст из генератора текстов Lorem ipsum dolor sit amet и в разметке использовано
три варианта свечения, параметры меняются здесь 

.glow {
  height:40px;
  margin:50px;
  background:
    radial-gradient(190px 20px,white, #FFFC00 15%,transparent 30%),
    linear-gradient(to right,transparent,#FFFC00,transparent) center/100% 5px no-repeat;
  border-radius:100%;
  position:relative;
  filter:blur(1px);
}    


Полный код:



.glow {
  height:40px;
  margin:50px;
  background:
    radial-gradient(190px 20px,white, #FFFC00 15%,transparent 30%),
    linear-gradient(to right,transparent,#FFFC00,transparent) center/100% 5px no-repeat;
  border-radius:100%;
  position:relative;
  filter:blur(1px);
}
.glow:before, .glow2:before, .glow3:before  {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:inherit;
  filter:blur(7px);
}  

.glow2 {
  height:40px;
  margin:50px;
  background:
    radial-gradient(190px 20px,white, #FF00AE 15%,transparent 30%),
    linear-gradient(to right,transparent, #FF00AE,transparent) center/100% 5px no-repeat;
  border-radius:100%;
  position:relative;
  filter:blur(1px);
} 

.glow3 {
  height:40px;
  margin:50px;
  background:
    radial-gradient(190px 20px,white, #7DEDFF 15%,transparent 30%),
    linear-gradient(to right,transparent, #7DEDFF,transparent) center/100% 5px no-repeat;
  border-radius:100%;
  position:relative;
  filter:blur(1px);
}


body {
 background:#000;
}
span {
color:white;
font-size:1.25em;

padding:1.3em;

}

.txt1 {
color:#FFE976; 
font-size:2.7em;
 text-align: center;
} 

.txt2 {
color:#FF7ED6;  
font-size:2.7em;
 text-align: center;
} 
.txt3 {
color:#88EDFD; 
font-size:2.7em;
 text-align: center;
}
 

 
Lorem ipsum dolor sit amet 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt dignissim
nibh a facilisis. Phasellus pretium nisl vel turpis suscipit, quis posuere quam laoreet.
Vestibulum fringilla porttitor felis, non lacinia dolor mattis vitae. Donec gravida
et purus eu pellentesque. Nam consequat nisl id velit interdum eleifend. Mauris nulla
turpis, sollicitudin in vestibulum nec, ornare quis lacus. Proin eros diam, lacinia
id blandit a, efficitur eget mauris. Morbi ullamcorper velit non urna malesuada molestie.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Donec vehicula est non nunc ultricies, sit amet pharetra nulla congue. Vestibulum hendrerit
ante ac rhoncus aliquet. Quisque vitae est turpis. Nulla sit amet felis nec nisl blandit
mollis.

Nullam ornare turpis quis orci hendrerit, vitae varius est tincidunt. In quis malesuada
tellus. Aliquam nunc mauris, aliquam quis lectus ut, ultrices lobortis ante. Maecenas
tincidunt ligula felis, in consequat lectus finibus eget. Maecenas molestie placerat
odio, at malesuada risus consequat id. Integer congue facilisis enim porta pretium.
Morbi scelerisque tincidunt purus, vitae rhoncus tortor tristique nec. Nullam laoreet
turpis nec felis vehicula finibus.  


Fusce ultricies maximus ante vitae imperdiet. Proin magna orci, pretium nec pretium
id, ultricies in risus. Praesent mauris ipsum, semper nec convallis sit amet, vestibulum
non enim. Quisque volutpat nulla ac nulla venenatis, ac cursus nulla laoreet. Aliquam
malesuada dui a orci tristique tristique. Phasellus fringilla, velit eget ultrices
efficitur, justo lacus elementum lorem, nec convallis augue lacus non dui. Aliquam
erat volutpat. Mauris sagittis, sapien in tristique mollis, ex libero laoreet magna,
ut pellentesque dolor augue accumsan elit. Nunc ut augue at eros sollicitudin malesuada.
Pellentesque urna felis, posuere sit amet odio et, vestibulum aliquet ex. Nulla eu
dolor blandit, bibendum nibh in, tincidunt ex. Ut nisl justo, tincidunt a augue et,
gravida sollicitudin neque. Donec id dignissim elit, a sollicitudin leo. Aliquam placerat
orci justo, et faucibus nibh volutpat vel.

Nulla varius, est eu dictum vulputate, risus tellus euismod augue, ac tempus velit
elit nec dui. Duis eleifend metus eu nisi mattis scelerisque. Proin finibus neque ut
pellentesque porta. Etiam quis ligula non ligula sollicitudin efficitur at a turpis.
Morbi tristique maximus quam eu imperdiet. Morbi dolor augue, sagittis non urna quis,
fringilla scelerisque erat. Praesent et tempor tortor. In hac habitasse platea dictumst.
Sed ut consectetur arcu, id vestibulum sapien. Integer in metus et lacus sollicitudin
sollicitudin. Curabitur vulputate mollis odio, sit amet dictum mauris condimentum non.
Vestibulum enim risus, luctus a tristique sit amet, semper non enim. Nunc laoreet hendrerit
massa at blandit.


 

 

 
Phasellus tincidunt dignissim  

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt dignissim
nibh a facilisis. Phasellus pretium nisl vel turpis suscipit, quis posuere quam laoreet.
Vestibulum fringilla porttitor felis, non lacinia dolor mattis vitae. Donec gravida
et purus eu pellentesque. Nam consequat nisl id velit interdum eleifend. Mauris nulla
turpis, sollicitudin in vestibulum nec, ornare quis lacus. Proin eros diam, lacinia
id blandit a, efficitur eget mauris. Morbi ullamcorper velit non urna malesuada molestie.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Donec vehicula est non nunc ultricies, sit amet pharetra nulla congue. Vestibulum hendrerit
ante ac rhoncus aliquet. Quisque vitae est turpis. Nulla sit amet felis nec nisl blandit
mollis.

Nullam ornare turpis quis orci hendrerit, vitae varius est tincidunt. In quis malesuada
tellus. Aliquam nunc mauris, aliquam quis lectus ut, ultrices lobortis ante. Maecenas
tincidunt ligula felis, in consequat lectus finibus eget. Maecenas molestie placerat
odio, at malesuada risus consequat id. Integer congue facilisis enim porta pretium.
Morbi scelerisque tincidunt purus, vitae rhoncus tortor tristique nec. Nullam laoreet
turpis nec felis vehicula finibus.  


Fusce ultricies maximus ante vitae imperdiet. Proin magna orci, pretium nec pretium
id, ultricies in risus. Praesent mauris ipsum, semper nec convallis sit amet, vestibulum
non enim. Quisque volutpat nulla ac nulla venenatis, ac cursus nulla laoreet. Aliquam
malesuada dui a orci tristique tristique. Phasellus fringilla, velit eget ultrices
efficitur, justo lacus elementum lorem, nec convallis augue lacus non dui. Aliquam
erat volutpat. Mauris sagittis, sapien in tristique mollis, ex libero laoreet magna,
ut pellentesque dolor augue accumsan elit. Nunc ut augue at eros sollicitudin malesuada.
Pellentesque urna felis, posuere sit amet odio et, vestibulum aliquet ex. Nulla eu
dolor blandit, bibendum nibh in, tincidunt ex. Ut nisl justo, tincidunt a augue et,
gravida sollicitudin neque. Donec id dignissim elit, a sollicitudin leo. Aliquam placerat
orci justo, et faucibus nibh volutpat vel.

Nulla varius, est eu dictum vulputate, risus tellus euismod augue, ac tempus velit
elit nec dui. Duis eleifend metus eu nisi mattis scelerisque. Proin finibus neque ut
pellentesque porta. Etiam quis ligula non ligula sollicitudin efficitur at a turpis.
Morbi tristique maximus quam eu imperdiet. Morbi dolor augue, sagittis non urna quis,
fringilla scelerisque erat. Praesent et tempor tortor. In hac habitasse platea dictumst.
Sed ut consectetur arcu, id vestibulum sapien. Integer in metus et lacus sollicitudin
sollicitudin. Curabitur vulputate mollis odio, sit amet dictum mauris condimentum non.
Vestibulum enim risus, luctus a tristique sit amet, semper non enim. Nunc laoreet hendrerit
massa at blandit.


  

 

 
Fusce ultricies maximus  

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt dignissim
nibh a facilisis. Phasellus pretium nisl vel turpis suscipit, quis posuere quam laoreet.
Vestibulum fringilla porttitor felis, non lacinia dolor mattis vitae. Donec gravida
et purus eu pellentesque. Nam consequat nisl id velit interdum eleifend. Mauris nulla
turpis, sollicitudin in vestibulum nec, ornare quis lacus. Proin eros diam, lacinia
id blandit a, efficitur eget mauris. Morbi ullamcorper velit non urna malesuada molestie.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Donec vehicula est non nunc ultricies, sit amet pharetra nulla congue. Vestibulum hendrerit
ante ac rhoncus aliquet. Quisque vitae est turpis. Nulla sit amet felis nec nisl blandit
mollis.

Nullam ornare turpis quis orci hendrerit, vitae varius est tincidunt. In quis malesuada
tellus. Aliquam nunc mauris, aliquam quis lectus ut, ultrices lobortis ante. Maecenas
tincidunt ligula felis, in consequat lectus finibus eget. Maecenas molestie placerat
odio, at malesuada risus consequat id. Integer congue facilisis enim porta pretium.
Morbi scelerisque tincidunt purus, vitae rhoncus tortor tristique nec. Nullam laoreet
turpis nec felis vehicula finibus.  


Fusce ultricies maximus ante vitae imperdiet. Proin magna orci, pretium nec pretium
id, ultricies in risus. Praesent mauris ipsum, semper nec convallis sit amet, vestibulum
non enim. Quisque volutpat nulla ac nulla venenatis, ac cursus nulla laoreet. Aliquam
malesuada dui a orci tristique tristique. Phasellus fringilla, velit eget ultrices
efficitur, justo lacus elementum lorem, nec convallis augue lacus non dui. Aliquam
erat volutpat. Mauris sagittis, sapien in tristique mollis, ex libero laoreet magna,
ut pellentesque dolor augue accumsan elit. Nunc ut augue at eros sollicitudin malesuada.
Pellentesque urna felis, posuere sit amet odio et, vestibulum aliquet ex. Nulla eu
dolor blandit, bibendum nibh in, tincidunt ex. Ut nisl justo, tincidunt a augue et,
gravida sollicitudin neque. Donec id dignissim elit, a sollicitudin leo. Aliquam placerat
orci justo, et faucibus nibh volutpat vel.

Nulla varius, est eu dictum vulputate, risus tellus euismod augue, ac tempus velit
elit nec dui. Duis eleifend metus eu nisi mattis scelerisque. Proin finibus neque ut
pellentesque porta. Etiam quis ligula non ligula sollicitudin efficitur at a turpis.
Morbi tristique maximus quam eu imperdiet. Morbi dolor augue, sagittis non urna quis,
fringilla scelerisque erat. Praesent et tempor tortor. In hac habitasse platea dictumst.
Sed ut consectetur arcu, id vestibulum sapien. Integer in metus et lacus sollicitudin
sollicitudin. Curabitur vulputate mollis odio, sit amet dictum mauris condimentum non.
Vestibulum enim risus, luctus a tristique sit amet, semper non enim. Nunc laoreet hendrerit
massa at blandit.