Create a radial-gradient() that covers two separate elements

Question

Create a radial-gradient() that covers two separate elements

Seeking to create a spherical appearance for a circle made of two semi-circular divs using background: radial-gradient(). Any ideas on achieving this effect without combining the two semi-circle divs into one circular div?

[The decision to use two semi-circle divs is due to a transition where the circle splits into two pieces. The desire to avoid overlaying with a single div is based on a similar rationale.]

.top-semi-circle, .bottom-semi-circle {
  width: 10em;
  height: 5em;
  background: radial-gradient(circle at 100px 100px, red, #000);
}
.top-semi-circle {
  border-radius: 10em 10em 0 0;
}
.bottom-semi-circle {
  border-radius: 0 0 10em 10em;
}
.full-circle {
  width: 10em;
  height: 10em;
  border-radius: 10em;
  background: radial-gradient(circle at 100px 100px, red, #000);
}

To achieve:
<div class="top-semi-circle"></div>
<div class="bottom-semi-circle"></div>
To resemble:
<div class="full-circle"></div>

css radial-gradients

Answer 1

Answer №1

Modify the position of the second gradient and, most importantly, assign a radius to both gradients to prevent any automatic value discrepancies due to different positions. The default value for size is farthest-corner, which may vary based on the position.

.top-semi-circle, .bottom-semi-circle {
  width: 10em;
  height: 5em;
}
.top-semi-circle {
  border-radius: 10em 10em 0 0;
  background: radial-gradient(circle 10em at 100px 100px, red, #000);
}
.bottom-semi-circle {
  border-radius: 0 0 10em 10em;
  background: radial-gradient(circle 10em at 100px 20px, red, #000);
}

.bottom-semi-circle:hover {
  transform:translateY(10px);
}

<div class="top-semi-circle"></div>
<div class="bottom-semi-circle"></div>

The radial gradient syntax is:

radial-gradient() = radial-gradient(
  [ <ending-shape> || <size> ]? [ at <position> ]? ,
  <color-stop-list>

<size>

Determines the size of the gradient’s ending shape. If omitted it defaults to farthest-corner. ^ref

You can also adjust background-size/background-position to maintain the gradient's definition. Simply set the size equal to the overall shape (top half + bottom half).

.top-semi-circle, .bottom-semi-circle {
  width: 10em;
  height: 5em;
  background-image: radial-gradient(circle at 100px 100px, red, #000);
  background-size:10em 10em;
}
.top-semi-circle {
  border-radius: 10em 10em 0 0;
  background-position:top;
}
.bottom-semi-circle {
  border-radius: 0 0 10em 10em;
  background-position:bottom;
}

.bottom-semi-circle:hover {
  transform:translateY(10px);
}

<div class="top-semi-circle"></div>
<div class="bottom-semi-circle"></div>

An alternative approach is overlapping with clip-path:

.top-semi-circle, .bottom-semi-circle {
  width: 10em;
  height: 10em;
  border-radius: 10em;
  background: radial-gradient(circle at 100px 100px, red, #000);
}
.top-semi-circle {
  clip-path:polygon(0 0,100% 0,100% 50%,0 50%);
}
.bottom-semi-circle {
  margin-top:-10em;
  clip-path:polygon(0 100%,100% 100%,100% 50%,0 50%);
}
.bottom-semi-circle:hover {
  transform:translateY(10px);
}

<div class="top-semi-circle"></div>
<div class="bottom-semi-circle"></div>

Similarly, you can achieve the same effect using mask:

.top-semi-circle, .bottom-semi-circle {
  width: 10em;
  height: 10em;
  border-radius: 10em;
  background: radial-gradient(circle at 100px 100px, red, #000);
}
.top-semi-circle {
  -webkit-mask:linear-gradient(to bottom,white 50%,transparent 0);
  mask:linear-gradient(to bottom,white 50%,transparent 0);
}
.bottom-semi-circle {
  margin-top:-10em;
  -webkit-mask:linear-gradient(to top,white 50%,transparent 0);
  mask:linear-gradient(to top,white 50%,transparent 0);
}
.bottom-semi-circle:hover {
  transform:translateY(10px);
}

<div class="top-semi-circle"></div>
<div class="bottom-semi-circle"></div>

Answer 2

Modify the position of the second gradient and, most importantly, assign a radius to both gradients to prevent any automatic value discrepancies due to different positions. The default value for size is farthest-corner, which may vary based on the position.

.top-semi-circle, .bottom-semi-circle {
  width: 10em;
  height: 5em;
}
.top-semi-circle {
  border-radius: 10em 10em 0 0;
  background: radial-gradient(circle 10em at 100px 100px, red, #000);
}
.bottom-semi-circle {
  border-radius: 0 0 10em 10em;
  background: radial-gradient(circle 10em at 100px 20px, red, #000);
}

.bottom-semi-circle:hover {
  transform:translateY(10px);
}

<div class="top-semi-circle"></div>
<div class="bottom-semi-circle"></div>

The radial gradient syntax is:

radial-gradient() = radial-gradient(
  [ <ending-shape> || <size> ]? [ at <position> ]? ,
  <color-stop-list>

<size>

Determines the size of the gradient’s ending shape. If omitted it defaults to farthest-corner. ^ref

You can also adjust background-size/background-position to maintain the gradient's definition. Simply set the size equal to the overall shape (top half + bottom half).

.top-semi-circle, .bottom-semi-circle {
  width: 10em;
  height: 5em;
  background-image: radial-gradient(circle at 100px 100px, red, #000);
  background-size:10em 10em;
}
.top-semi-circle {
  border-radius: 10em 10em 0 0;
  background-position:top;
}
.bottom-semi-circle {
  border-radius: 0 0 10em 10em;
  background-position:bottom;
}

.bottom-semi-circle:hover {
  transform:translateY(10px);
}

<div class="top-semi-circle"></div>
<div class="bottom-semi-circle"></div>

An alternative approach is overlapping with clip-path:

.top-semi-circle, .bottom-semi-circle {
  width: 10em;
  height: 10em;
  border-radius: 10em;
  background: radial-gradient(circle at 100px 100px, red, #000);
}
.top-semi-circle {
  clip-path:polygon(0 0,100% 0,100% 50%,0 50%);
}
.bottom-semi-circle {
  margin-top:-10em;
  clip-path:polygon(0 100%,100% 100%,100% 50%,0 50%);
}
.bottom-semi-circle:hover {
  transform:translateY(10px);
}

<div class="top-semi-circle"></div>
<div class="bottom-semi-circle"></div>

Similarly, you can achieve the same effect using mask:

.top-semi-circle, .bottom-semi-circle {
  width: 10em;
  height: 10em;
  border-radius: 10em;
  background: radial-gradient(circle at 100px 100px, red, #000);
}
.top-semi-circle {
  -webkit-mask:linear-gradient(to bottom,white 50%,transparent 0);
  mask:linear-gradient(to bottom,white 50%,transparent 0);
}
.bottom-semi-circle {
  margin-top:-10em;
  -webkit-mask:linear-gradient(to top,white 50%,transparent 0);
  mask:linear-gradient(to top,white 50%,transparent 0);
}
.bottom-semi-circle:hover {
  transform:translateY(10px);
}

<div class="top-semi-circle"></div>
<div class="bottom-semi-circle"></div>

Answer 3

Answer №2

To position the radial in the second bottom semi-circle, we can use calc(). For example, using calc(100px - 5em) to achieve the desired outcome. This calculation considers 100px as the offset of the center of the gradient in the top half and 5em as the height of one semi-circle.

Additionally, it is necessary to specify the size of the gradient to ensure that they match. By default, the sizes may differ due to variations in distance from the center to the different sides.

.top-semi-circle {
  width: 10em;
  height: 5em;
  background: radial-gradient(10em at 100px 100px, red, #000);
}
.bottom-semi-circle {
width: 10em;
  height: 5em;
  background: radial-gradient(10em at 100px calc(100px - 5em), red, #000);
}
.top-semi-circle {
  border-radius: 10em 10em 0 0;
}
.bottom-semi-circle {
  border-radius: 0 0 10em 10em;
}
.full-circle {
  width: 10em;
  height: 10em;
  border-radius: 10em;
  background: radial-gradient(circle at 100px 100px, red, #000);
}

Make this:
<div class="top-semi-circle"></div>
<div class="bottom-semi-circle"></div>
Look like this:
<div class="full-circle"></div>

Answer 4

To position the radial in the second bottom semi-circle, we can use calc(). For example, using calc(100px - 5em) to achieve the desired outcome. This calculation considers 100px as the offset of the center of the gradient in the top half and 5em as the height of one semi-circle.

Additionally, it is necessary to specify the size of the gradient to ensure that they match. By default, the sizes may differ due to variations in distance from the center to the different sides.

.top-semi-circle {
  width: 10em;
  height: 5em;
  background: radial-gradient(10em at 100px 100px, red, #000);
}
.bottom-semi-circle {
width: 10em;
  height: 5em;
  background: radial-gradient(10em at 100px calc(100px - 5em), red, #000);
}
.top-semi-circle {
  border-radius: 10em 10em 0 0;
}
.bottom-semi-circle {
  border-radius: 0 0 10em 10em;
}
.full-circle {
  width: 10em;
  height: 10em;
  border-radius: 10em;
  background: radial-gradient(circle at 100px 100px, red, #000);
}

Make this:
<div class="top-semi-circle"></div>
<div class="bottom-semi-circle"></div>
Look like this:
<div class="full-circle"></div>

Answer 5

Answer №3

To create a circular element with hover effects, you can use the CSS properties overflow hidden along with pseudo elements.

*{box-sizing: border-box}
[class$=circle] {
  width: 10em;
  height: 10em; 
  overflow: hidden;
  position: relative; 
  display: block;
  will-change: transform;
  transition: transform .2s ease
}
[class$=circle]:before {
  content: "";
  position: absolute;
  left: 0;
  width: 10em;
  height: 10em;
  border-radius: 50%;
  background: radial-gradient(circle at 100px 100px, red, #000);
}
[class^=top]:before { 
  top: 50%;
}
[class^=bottom]:before { 
  bottom: 50%;
}
figure{
  width: 10rem;
  height: 10rem;
}
figure:hover [class^=top] {
  transform: translate3d(0, -10px, 0)
}
figure:hover [class^=bottom] {
  transform: translate3d(0, 10px, 0)
}

<figure>
  <div class="top-semi-circle"></div>
  <div class="bottom-semi-circle"></div>
</figure>

Answer 6

To create a circular element with hover effects, you can use the CSS properties overflow hidden along with pseudo elements.

*{box-sizing: border-box}
[class$=circle] {
  width: 10em;
  height: 10em; 
  overflow: hidden;
  position: relative; 
  display: block;
  will-change: transform;
  transition: transform .2s ease
}
[class$=circle]:before {
  content: "";
  position: absolute;
  left: 0;
  width: 10em;
  height: 10em;
  border-radius: 50%;
  background: radial-gradient(circle at 100px 100px, red, #000);
}
[class^=top]:before { 
  top: 50%;
}
[class^=bottom]:before { 
  bottom: 50%;
}
figure{
  width: 10rem;
  height: 10rem;
}
figure:hover [class^=top] {
  transform: translate3d(0, -10px, 0)
}
figure:hover [class^=bottom] {
  transform: translate3d(0, 10px, 0)
}

<figure>
  <div class="top-semi-circle"></div>
  <div class="bottom-semi-circle"></div>
</figure>

Create a radial-gradient() that covers two separate elements

Answer №1

Answer №2

Answer №3

Similar questions

Resolve Bootstrap columns with varying heights

JavaScript Application - Problem with Universal Windows Script

Customize the appearance of tables in your WordPress theme

Error: The function window.intlTelInput is not recognized within the ReactJS framework

Bootstrap 3 Implementation of a Clear Navbar

HTML and CSS link conflict

Guide on using jQuery to automatically scroll to the HTML container related to a clicked letter

Tips for placing <div .right> above <div .left> when the window is small, given that <div .right> is positioned to the right of <div .left> when the window is large

Troubleshooting: Issue encountered while adding jQuery Slideshow plugin to current website

What is the best way to have three divs displayed in a row - either all inline or all block, without having two displayed inline and one displayed

CSS: Creating a block that stretches the entire width of its parent block

Positioning a Box tag at the bottom using MUI 5

Align content to the bottom using Bootstrap 4

How to Align Navigation Bar Items to the Right in Bootstrap 4

CSS3 flip effect on hover and click causing issues

Concealing excess content in a vertical container with margins

"Stuck: CSS Div Transition Effect Refuses to Cooper

Creating a centered transparent rectangle of a specific width using HTML

Scrollable Tailwind components

Hover effect malfunctioning on the website