Recently, I stumbled upon some 80's retro design elements that featured glowing effects, such as this one:
https://i.sstatic.net/aaJPR.png
Would it be possible to recreate this glowing effect using just CSS? I'm thinking of creating a line with some box shadow, but I want more intensity in the middle and less on the sides. I'm unsure how to achieve this effect purely with CSS. Any insights would be greatly appreciated.
Thank you in advance.
Is this what you're looking for?
:root {
--clr-inner: #fed9ff;
--clr-outer: #c727c9;
}
body {
background-color: black;
text-align: center;
}
.box {
display: inline-block;
position: relative;
width: 100%;
}
.box .line-outer {
background: var(--clr-outer);
border-radius: 50%;
box-shadow: 0px 0px 25px 10px var(--clr-outer);
filter: blur(1px);
height: 4px;
overflow: hidden;
position: absolute;
width: 100%;
}
.box .line-outer .line-inner {
background: var(--clr-inner);
border-radius: 50%;
box-shadow: 0px 0px 25px 15px var(--clr-inner);
filter: blur(1px);
height: 4px;
left: 30%;
position: absolute;
top: 0;
width: 40%;
}<div class="box">
<div class="line-outer">
<div class="line-inner"></div>
</div>
</div>Have you considered implementing a radial gradient in your design? (Feel free to adjust the parameters using this online tool: )
#demo {
background: #FFFFFF;
background: -moz-radial-gradient(center, #FFFFFF 0%, #A42799 64%, #000000 100%);
background: -webkit-radial-gradient(center, #FFFFFF 0%, #A42799 64%, #000000 100%);
background: radial-gradient(ellipse at center, #FFFFFF 0%, #A42799 64%, #000000 100%);
height:50px;
width:100%
}<div id="demo"></div>I'm experimenting with chaining multiple -webkit-transition animations in my CSS without using keyframes. I understand it's possible to achieve this by calling a keyframe animation, but I prefer to simply overwrite the properties. However, for s ...
I've been implementing a unique approach for more than a year now, and I have yet to come across similar practices elsewhere. Essentially, I am structuring display "states" or "modes" by utilizing CSS classes. Despite searching for terms like "css mod ...
A method I am using involves displaying additional data on hover for a shortened header, like this: Hover behavior However, the text shifts across the page when the scrollbar is used, as shown here: Scrollbar interaction This table showcases HTML, CSS, ...
I'm trying to create a dropdown menu that appears directly under the URL that triggers it. I have successfully made the menu appear, but I am struggling with positioning it correctly. Here is my HTML code: <div id="container"> Content here ...
Here is the HTML code snippet: <div class="a-row a-spacing-small a-size-small"> <div class="a-row"> <a class="a-link-normal a-declarative g-visible-js reviewStarsPopoverLink" href="#" data-action="a-popover" data-a-popover="{"closeButton":" ...
It seems like there is a slight error appearing in the Inspect Element Source Tab of Google Chrome (also checked in Firefox). I have searched extensively for a solution but haven't found anything helpful. My Wordpress theme displays wp-admin in inspec ...
When viewing my website on a mobile device, the heading in the div tag is not occupying the remaining space like it does on desktop. The heading is an h4 tag inside a div tag for mobile view. If you want to check out my website in inspect mode, here is the ...
Currently, I am focusing on a project that is small and emphasizes presentation more than security. The main objective is to create a form where users can input data, then click submit for all the information gathered to be sent to a specified 'mailt ...
I recently encountered an issue with my HTML page that features a basic image gallery enhanced by lightboxes (fancybox). The images are meant to align left, with the first row containing three images and the second row containing two. <div class="image ...
I've been searching for a solution to this issue, but I haven't been able to make it work. My goal is to have the page header change from a transparent background to a red background as the user starts scrolling down the page. $(window).on("s ...
Can you help me solve a challenge I'm facing? I have a website with a fullsize background image, and I need to attach a div to a specific position on the image while ensuring that it scales in the same way as the background image with the "background ...
Here's the div code I'm working with: <div style='overflow:hidden;resize:both;border:1px solid orange;'> <div style='background-color:#aaa;width:400px;height:300px;'> </div> </div> You can view i ...
Applying position sticky to th and td in the example below seems to be causing issues with the box shadow not working. Can anyone provide insights on why this is happening? <div class="overflow-x-auto lg:overflow-visible"> <div> <t ...
While working on a graph that requires zooming and displaying tooltips for each data point, I encountered an issue with overlapping tooltips when adjusting the data set in Victory's documentation. I came across VictoryPortal as a solution to this prob ...
Currently, I'm working on a conditional rendering issue where I want to give a div full width but due to padding applied to its parent, it's not expanding to the container's full width. Here is the snippet of the code: import Image from &qu ...
Currently, I am working on a layout design using Bootstrap 3 that involves eight text divs. These divs have almost the same height, but some are slightly taller depending on the screen width. My goal is to arrange them into three columns on desktop and th ...
https://i.stack.imgur.com/ZUYa4.png Utilizing a material-ui (v 4.9.5) Popper for a pop-out menu similar to the one shown above has been my recent project. The anchorElement is set as the chosen ListItem on the left side. My goal is to have the Popper alig ...
Can you help me create a footer menu using HTML and CSS? Check out this image for reference Any tips on how to style it with cascading style sheets? <footer> <ul> <li><a href="">Home</a> </li> <li> ...
After not finding any helpful answers on this topic, I've decided to ask for help again. My issue involves having an image inside a div. <div id ="gratterlendis"> <a href ="?page_id=8"><img src="img/gratterlendis.png" align="right" wid ...
Recently, I've been working on an app that aims to generate a custom map based on user input from a form. If you'd like to test the functionality yourself, head over to this page. After filling out all required fields and hitting "Submit", the g ...