Chromatic Edge CSS gradient

RGB fringing along a diagonal. 3 CSS layers on #101018, mixed with screen and overlay. Edit it in the studio below, then copy the code.

Gradient Studio couldn't load its presets.

It needs a live connection to CrunchCube. Check your internet connection and reload, or open the studio at crunchcube.in.

CSS gradients · blend modes · Tailwind · 40 presets

Chromatic Edge,
ready to paste.

RGB fringing along a diagonal. 3 layers mixed with screen and overlay. Open it in the editor to tune each layer, then take the code as CSS, Tailwind, SVG or HTML.

Chromatic Edge CSS

.bg-chromatic-edge {
  background-color: #101018;
  background-image:
    linear-gradient(60deg, rgba(255, 0, 64, 0.5) 0%, rgba(0, 255, 157, 0.5) 100%),
    linear-gradient(120deg, rgba(0, 102, 255, 0.4) 0%, rgba(255, 230, 0, 0.4) 100%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 60%);
  background-blend-mode: screen, screen, overlay;
  background-size: cover;
}

Colours in Chromatic Edge

#101018#FF0040#00FF9D#0066FF#FFE600#FFFFFF

Where to use it

Chromatic Edge is a prism gradient on a dark base. Use it for dark-mode heroes, app splash screens and video thumbnails, with white or very light text on top.

New to layered gradients? Here's how the CSS works.

More prism gradients

Prism SplitWhite light broken into three bands
Holo FoilIridescent sticker sheen
Spectrum FoldA folded band of full spectrum
Oil SlickPetrol film on wet asphalt
Neon RefractionHard neon through frosted glass

New games, tools and tutorials

About one short email a week. No spam, one-click unsubscribe.