Creating a “Black Hole” in CSS as Background. Bonus: (Sun and Moon)

Let’s create a black hole to be used in the background on your websites just with css.

black hole

Follow this and other backgrounds here: https://backseasy.com/

Introduction

A black hole is a region of space-time in which gravity is so strong that nothing, not even particles of light, can escape it. Creating a visual effect that simulates a black hole can add a unique dimension to your website design.

Implementation in CSS

radial-gradient()

Radial-gradient() is a CSS function that creates an image consisting of a progressive transition between two or more colors radiating from an origin. Its shape can be a circle or an ellipse.

The result of the function is an object of type <gradient>, which is a special type of <image>. To create the black hole effect, we’ll use a combination of a radial gradient and some CSS properties for styling.

radial gradient

Knowing this, let’s go to the code:

import Image from "next/image";

export default function BlackHole() {
  return (
    <section
      className="flex flex-col items-center h-screen"
      style={{
        backgroundImage: `
          radial-gradient(circle at top, #000 35%, #733000 45%, #000 75%)
        `
      }}
    >
  
      {your component or page}
    </section>
  );
}

Explanation of the Code

• radial-gradient: This CSS function creates an image consisting of a radial gradient.
• circle at top: Defines that the gradient starts from the top of the specified area.
• #000 35%: Sets the color black (#000) to 35% of the gradient radius, representing the darkness of the black hole.
• #913d01 45%: Sets a burnt orange color (#913d01) for 45% of the radius, simulating the edge of the black hole.
• #000 75%: Defines again the black color (#000) for 75% of the radius, representing the radius of brightness of the accretion disk of the black hole.

Final result:

Bonus

Moon

import Image from "next/image";

export default function Home() {
  return (
    <section
      className="flex flex-col items-center h-screen"
      style={{
        backgroundImage: `
        radial-gradient(circle at top, #282828 3%, #848484 50%, #000 70%)
        `
      }}
    >

      {your component or page}
  
    </section>
  );
}

Page moon

Sun:

import Image from "next/image";

export default function Home() {
  return (
    <section
      className="flex flex-col items-center h-screen"
      style={{
        backgroundImage: `
        radial-gradient(circle at top, #8a5101 35%, #733000 45%, #000 75%)
        `
      }}
    >

      
  {your component / page}
    </section>
  );
}

page sun

Note

If this content was useful to you in any way, please consider following me on Github or supporting me to continue working.

If you have any questions, criticisms or improvements, please suggest them via my Linkdin.