Magma Ring CSS Gradient

A red, black, dramatic conic gradient you can drop into any project. Copy the CSS below and use it as a background for hero sections, cards, buttons, or full pages.

The CSS

background-color: oklch(0.137 0.056 29.234);
background-image: conic-gradient(from 0deg, oklch(0.66 0.229 35.403), oklch(0.4 0.164 29.234), oklch(0.182 0.074 29.234), oklch(0.66 0.229 35.403));

The colors

The colors this gradient blends between. Open any of them for a full breakdown — shades, harmonies, and contrast.

Tags:redblackdramaticConic

Related gradients

Warm Tones
Ember Glow
Magma Core
Deep Space
Warm Flame
Wine Glass
Spectrum Wheel
Sunset Ring

More gradient tools

Browse the full gallery of CSS gradients, build animated backgrounds with the Shader Maker, or generate soft multi-color backgrounds with the Mesh Gradient Generator.