How to use pure CSS to achieve the effect of a Saturn

This article introduces you to the article about how to use pure CSS to achieve a Saturn effect, there is a good reference value, hoping to help the needy friends.

Effect Preview

Code interpretation

Defining the DOM, the container itself represents the planet Saturn, where the ring elements represent the rings of Saturn:

<p class= "Saturn" >        <span class= "Rings" ></span>    </p>

Center display:

body {    margin:0;    HEIGHT:100VH;    Display:flex;    Align-items:center;    Justify-content:center;    Background-color:black;}

Define Container Dimensions:

. Saturn {    width:20em;    Height:20em;    font-size:20px;}

Draw the planet Saturn (this is a draft, which will be refined later):

. Saturn {    position:relative;}. Saturn::before,.saturn::after {    content: ';    Position:absolute;    Width:9em;    Height:9em;    Background:linear-gradient (        palegoldenrod 0,        Tan 10%,        burlywood 30%,        palegoldenrod 60%,        Darkgray 100%    );    border-radius:50%;    Left:calc ((20EM-9EM)/2);    Top:calc ((20EM-9EM)/2);}

Draw a Ring of Saturn (this is a draft, which will be refined later):

. rings {    position:absolute;    Width:inherit;    Height:inherit;    Background:radial-gradient (        transparent 35%,        dimgray 40%,        slategray 50%,        transparent 60%,        Dimgray 60%,        slategray 70%,        transparent 70%    );}

Change the viewing angle of Saturn's rings:

. Rings {    Transform:rotatex (75deg);}

In order for Saturn to appear surrounded by Saturn's rings, the Saturn is divided into two halves, making them and Saturn's layers order from bottom to top: the lower half of the planet, the rings of Saturn, the top half of the planet:

. saturn::before {    clip-path:inset (50% 0 0 0);}. Saturn::after {    clip-path:inset (0 0 50% 0);}

At this point, the overall structure of Saturn is drawn, and the details are perfected next.
Apply a rich gradient to the rings of Saturn:

. Rings {background:radial-gradient (Rgba (24,19,25,0) 0, Rgba (53,52,51,0) 34%, Rgba (55,54,52,1)        36%, Rgba (56,55,53,1) 37%, Rgba (68,67,66,1) 38%, Rgba (56,55,53,1) 39%, Rgba (68,67,66,1) 40%,        Rgba (56,55,53,1) 41%, Rgba (87,77,76,1) 42%, Rgba (87,77,76,1) 44%, Rgba (113,110,103,1) 46%,        Rgba (113,110,103,1) 48%, Rgba (113,98,93,1) 49%, Rgba (113,98,93,1) 51%, Rgba (122,115,105,1) 52%,        Rgba (113,98,93,1) 53%, Rgba (113,98,93,1) 54%, Rgba (122,115,105,1) 55%, Rgba (106,99,89,1) 56%,        Rgba (106,99,89,1) 58%, Rgba (79,76,76,0) 60%, Rgba (65,64,70,1) 61%, Rgba (65,64,70,1) 62%, Rgba (90,85,89,1) 63%, Rgba (78,74,73,1) 65%, Rgba (78,73,74,1) 67%, Rgba (78,73,74,0) 68%, Rgba (7 8,73,75,1) 69%, Rgba (78,73,75,1) 70%, Rgba (78,73,76,0) 71%, Rgba (77,72,76,0) 72%, Rgba (24,19,2 5,0) 100%);}

Paint the planet a rich gradient:

. saturn::before,.saturn::after {    background:        linear-gradient (            rgba (212,203,174,1) 0,            Rgba ( 212,203,174,1) 10%,            Rgba (221,203,157,1) 15%,            Rgba (221,203,157,1) 17%,            Rgba (213,181,143,1) 22%,            Rgba (213,181,143,1) 26%,            Rgba (208,180,158,1) 32%,            Rgba (208,180,158,1) 36%,            Rgba (218,188,162,1) 37%,            Rgba (218,188,162,1) 39%,            Rgba (211,184,157,1) 41%,            Rgba (211,184,157,1) 49%,            Rgba ( 205,186,156,1) 51%,            Rgba (205,186,156,1) 52%,            Rgba (202,176,153,1) 53%,            Rgba (202,176,153,1) 65%,            Rgba (190,177,145,1) 68%,            Rgba (190,177,145,1) 80%,            Rgba (150,144,130,1) 91%,            Rgba ( 150,144,130,1) 95%,            Rgba (131,129,117,1) 97%,            Rgba (131,129,117,1) 100%        );}

and add light to the planet:

. saturn::before,.saturn::after {background:radial-gradient (circle at top, transparent 40%, Black), radial-gradient (Transparent 62%, black), line            Ar-gradient (Rgba (212,203,174,1) 0, Rgba (212,203,174,1) 10%, Rgba (221,203,157,1) 15%, Rgba (221,203,157,1) 17%, Rgba (213,181,143,1) 22%, Rgba (213,181,143,1) 26%, Rgba (  208,180,158,1) 32%, Rgba (208,180,158,1) 36%, Rgba (218,188,162,1) 37%, Rgba (218,188,162,1)            39%, Rgba (211,184,157,1) 41%, Rgba (211,184,157,1) 49%, Rgba (205,186,156,1) 51%, Rgba (205,186,156,1) 52%, Rgba (202,176,153,1) 53%, Rgba (202,176,153,1) 65%, Rgba (190,17            7,145,1) 68%, Rgba (190,177,145,1) 80%, Rgba (150,144,130,1) 91%, Rgba (150,144,130,1) 95%, Rgba (131,129,117,1) 97%, Rgba (131,129,117,1) 100%);} 

Finally, rotate the picture a little angle:

. Saturn {    transform:rotate ( -15deg);}

Done!