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

Exploring Angular Material Design's method for vertically populating a column

Strange Behavior of HTML5 Audio Elements

How can I position four DIV elements to the right of each other inside a parent DIV?

The hideCol method does not work on jqGrid

Secret button concealed within a div, revealing only a helpful hint

Align the radio buttons vertically

Transition smoothly between two images with CSS or jQuery

A step-by-step guide on utilizing jQuery to cyclically change the background color of elements upon clicking, and resetting the colors upon clicking another element

When the height of the window decreases, scrolling is not implemented

Is it possible to submit a form through a JavaScript hotkey?

Issues with Bootstrap Container on Smartphones

Eliminate the excess padding from the Material UI textbox

What is the best way to enhance specific sections of Django content by incorporating <span> tags, while maintaining the original paragraph text format?

Getting Started with CSS Alignment - A Novice's Guide

Is there a method to construct this? It appears quite challenging to create the intricate lines

The image I want to show is invisible on the CSS custom radio button

Looking for assistance with CSS border animation

Beginning of my initial endeavor (seeking feedback, general advice, criticism)

Angular JS is having some issues with rendering the style correctly

What is the best way to implement horizontal content scrolling when an arrow is tapped in mobile view?