Skip to content

Latest commit

 

History

History
57 lines (39 loc) · 2.07 KB

README.md

File metadata and controls

57 lines (39 loc) · 2.07 KB

preview of the effect showing a linear gradient from top to bottom of nearly black, dark purple, and a purpley navy, over top of which are many small dots in varying sizes and opacity, then a cloud like effect, and final the words Hello World

CSS Houdini Cosmic Starfield

From Stephanie Eckles @5t3ph - author of ModernCSS.dev.

Generate a dynamic cosmic starfield with optional cosmic clouds and customizable gradient.

Preview on CodePen

How to Use

While Houdini paint worklets have the best support out of available Houdini features, they still currently require a polyfill to ensure they are applied cross browser.

So, first include the following once in your project.

<script src="https://unpkg.com/css-paint-polyfill"></script>

Note: The polyfill will not work if the worklet is applied to pseudo elements, and may have issues with customization when applied to the body element.

Then, include the paint worklet script after the polyfill is loaded:

<script>
  CSS.paintWorklet.addModule("https://unpkg.com/houdini-cosmic-starfield");

  // Trickery to get the polyfill to draw the worklet in Firefox and Safari
  setTimeout(() => {
    document.querySelector("ANCESTOR_ELEMENT").style.width = "100.01%";
    document.querySelector("ANCESTOR_ELEMENT").style.width = "100%";
  }, 500);
</script>

Finally, use it in your styles! For best results, assign as the background-image to a dedicated element.

.cosmic-starfield-element {
  /* Number of stars */
  --cosmic-starfield-stars: 4280;
  /* 'true' or do not include to hide the clouds */
  --cosmic-starfield-clouds: true;
  /* String array of at least two hex codes */
  --cosmic-starfield-gradient-colors: #471f60, #231b6e;

  /* Use the worklet! */
  background-image: paint(cosmic-starfield);
}

!important - provided gradient colors must be in hex format.

What is CSS Houdini?

Check out other Houdini paint worklets and more info at Houdini.How.