Tips for softening the edges of gradient circles

Is there a way to achieve a gradient fade out effect without the lines around the circles? I want to create a nice gradient shine/glow effect by removing those surrounding lines. Check out the full page code snippet below for reference.

.box {
  width: 2000px;
  height: 2000px;
  border-radius: 50%;
  background: -webkit-radial-gradient( white, transparent 75%);
  opacity: 1;
  position: absolute;
  top:-1000px;
  left:-500px;
  opacity: 0.7;
}
.box2 {
  width: 2000px;
  height: 2000px;
  border-radius: 50%;
  background: -webkit-radial-gradient( orange, transparent 75%);
  opacity: 1;
  position: absolute;
  top:-800px;
  right:-800px;
  opacity: 0.5;
}
body {
  background: darkblue;
  overflow: hidden;
  padding:0;
  margin:0;
}
.container {
  max-width: 1600px;
  overflow: hidden;
  position: relative;
  height: 100vh;
  margin: 0 auto;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css.css">
    <title></title>
  </head>
  <body>
  <div class="container">
    <div class="box">

    </div>
    <div class="box2">

    </div>
  </div>


  </body>
</html>

Answer №1

The circular shapes you are observing are a result of the interplay between opacity and border-radius. It seems like what you may actually want is to eliminate the border-radius altogether.

Additionally, from a design perspective, using a "white" transparent background might be more visually appealing compared to the default "black" transparent option. While transparency itself does not have a color, its interaction with other elements like transitions can create different visual effects.

.box {
  width: 2000px;
  height: 2000px;
  background: radial-gradient( white, rgba(255, 255, 255, 0) 75%);
  opacity: 1;
  position: absolute;
  top:-1000px;
  left:-500px;
  opacity: 0.7;
}
.box2 {
  width: 2000px;
  height: 2000px;
  background: radial-gradient( orange, rgba(255, 255, 255, 0) 75%);
  opacity: 1;
  position: absolute;
  top:-800px;
  right:-800px;
  opacity: 0.5;
}
body {
  background: darkblue;
  overflow: hidden;
  padding:0;
  margin:0;
}
.container {
  max-width: 1600px;
  overflow: hidden;
  position: relative;
  height: 100vh;
  margin: 0 auto;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css.css">
    <title></title>
  </head>
  <body>
  <div class="container">
    <div class="box">

    </div>
    <div class="box2">

    </div>
  </div>


  </body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to dynamically adjust the width of multiple divisions in Angular?

I am currently working on an angular project to create a sorting visualizer. My goal is to generate a visual representation of an array consisting of random numbers displayed as bars using divisions. Each bar's width will correspond to the value of th ...

Adding an event listener to the built-in arrow buttons on the `<input type=number>` element is a simple way to enhance user interaction

<input type="number" id="test"> I'm trying to figure out how to set an event listener for the two arrow buttons on the right of this number input field. Typically, we can use jQuery like: $("#test").on("cl ...

Developing components through JavaScript

I am attempting to use JavaScript to create an element in my HTML using createElement, but there seems to be an issue in my code. HTML <button class="test_button">I am a test</button> <div class="test"></div> ...

The background refuses to cooperate, soaring upward only to be abruptly sliced in two

I am in the process of creating a website login window with an image background, but I'm experiencing issues where the image is being cut in half and moved up. Here is the code snippet I am currently using: .loginbody { background: url(img/LoginB ...

Is it possible to have the Save Success Alert fade out only once?

After incorporating this code snippet, I implemented a fade effect on the success alert whenever it is triggered. However, I noticed that the fade effect only occurs the first time I click "save". Subsequent clicks do not trigger the fade effect, causing ...

Tips for resizing the background image within a DIV element

HTML: <div class="navImageLinks"> <div id="fp" class="mainImageNav floatLeft fp"> <img src="../theImages/FindaProvider_icon.png" width="20" height="20" style="vertical-align: middle;" /> Find a Provider </div> & ...

Ways to insert a gap underneath every line

Hello, I'm struggling to create space below each line of code. I've tried using the br tag and margin property, but it didn't work. Can anyone help me with this? I'm not sure if the current HTML structure is correct or if I should swit ...

Is there a way to display (PHP for loop variables) within an HTML table using echo?

for ($q = 1 ; $q < 7 ; $q++ ) { echo $q ; echo $row; } While the above code functions properly, I am interested in echoing two rows as shown in the image below: https://i.stack.imgur.com/7KmUY.jpg I prefer not to use another for loop. Is there a way t ...

Using jQuery to smoothly scroll to a specific class name

I am faced with an HTML code snippet that looks like this: <div data-stored="storenow" data-save="save" class="saveIcon" data-unique="game">Save</div> My intention is to use jQuery to scroll to the game number 456 as shown below. var contain ...

Is it possible to use CSS to change the order in which two elements are displayed?

Let's dive into a little experiment here. I am currently working on a page layout that is quite unique: <div id="container"> <div id="child1">...</div> <div is="child2">...</div> </div> My goal is to have ...

What is the best way to center a fixed position background image within a container that is slightly shifted from the top of the viewport?

How can I center a background-image vertically, which has a fixed background-attachment and is positioned 100px from the top? The background-size property is set to cover for horizontal centering but the vertical alignment is off. Below is the HTML code: ...

Enable compatibility with high resolution screens and enable zoom functionality

My goal is to ensure my website appears consistent on all screen sizes by default, while still allowing users to zoom in and out freely. However, I've encountered challenges with using percentages or vh/vw units, as they don't scale elements prop ...

Implementing CSS animations in ReactJS: A guide to activating onClick and onHover events

Is there a way to activate the onClick and onHover CSS animations for the ReactJS button component below? I attempted to use ref = {input => (this.inputElement = input)}, but I only see the animation when clicking the button. <td> ...

Text that only occupies a portion of the screen width

My unordered list (ul) contains three list items (li). The first li element displays the text "opptakskrav" and the last li element displays "ja". Can anyone explain why the text in my second li element does not use the full width and starts a new line hal ...

Navigate to the following section by scrolling down, and return to the previous section by scrolling up

Currently, I am working on a portfolio website for a filmmaker and I have a specific requirement. As users scroll down the window, I want the page to smoothly transition to the next section, and when scrolling up, I want it to go back to the previous secti ...

The styling of Bootstrap CSS is not displaying correctly within the body of the webpage

I'm facing an issue where the content in the body of my page is not rendering correctly due to a problem with my bootstrap css. Specifically, the paragraph tag seems to be rendering inside the image tag even though both are within the body. @{ Lay ...

What is the best method to transfer this logo to my header without affecting the title's placement?

I'm currently working on a website and I am trying to figure out how to position the title and logo in the header. Ideally, I want the title to be centered and the logo to be on the left. However, I've encountered an issue where the title is cau ...

Tips for creating dynamic row styles in a fluid table layout?

Could someone help me figure this out? I'm not familiar with JavaScript and need assistance as I've never created it, only edited existing scripts. I have a layout with two tables side-by-side. On mobile devices, the second table is pushed below ...

I am looking for a way to distinguish between mandatory and non-mandatory input fields in React

I've encountered an issue with the borders of the text fields in my React project. Here's how I want the text fields to look: https://i.stack.imgur.com/MP6DG.png Currently, the borders appear straight in the browser even though I want them rou ...

Launching a Popup in ASP.NET followed by a Redirect

I have a unique custom CSS/HTML popup lightbox along with a form that contains a button. My objective is, upon clicking the button: to open the popup followed by using Thread.Sleep and finally carry out a Response.Redirect to a different page. Do you th ...