Learn CSS by playing with it.

background: linear-gradient(135deg, #88d1c7 0%, #77a7d7, #eaac3a 100%);

linear-gradient() creates an image of two or more colors transitioning along a straight line. Use it with properties that accept an image, such as background or background-image.

background: radial-gradient(circle at 30% 30%, #88d1c7, #77a7d7 50%, #eaac3a);

radial-gradient() creates an image of colors spreading outward from a center as a circle or an ellipse. Use it with properties that accept an image, such as background or background-image.

background: conic-gradient(from 45deg, #88d1c7, #77a7d7, #eaac3a, #88d1c7);

conic-gradient() creates an image whose colors change as you sweep around a center, like the hand of a clock. It draws pie charts and color wheels.

background-size: 50%;

background-size sets how large a background image is drawn. Give a width and height directly, or use cover and contain to fit the element.

background-position: 25% 75%;

background-position sets where a background image sits. Write the horizontal then the vertical position with keywords, lengths or percentages.

background-blend-mode: multiply;

background-blend-mode sets how background images mix with each other and with the background color, so a single element’s background can tint a photo.

border: 8px solid #88d1c7;

border is a shorthand for an element’s border. It sets border-width, border-style and border-color in any order, and any of them can be omitted.

border-radius: 48px 8px;

border-radius rounds the corners of an element. It is a shorthand for all four corners, and a / lets you give corners different horizontal and vertical radii for an elliptical shape.

outline: 4px solid #4a86cb;

outline is a shorthand that draws a line outside an element. Like border, it takes a width, style and color in any order, but it never affects layout.

box-shadow: 0 1px 2px #0f172a1f, 0 16px 40px -8px #0f172a40;

box-shadow casts shadows outside (or inside) an element’s frame. Separate several shadows with commas to layer them.

filter: hue-rotate(90deg) drop-shadow(0 8px 12px #0f172a40);

filter applies image effects such as blur, brightness, and hue rotation to everything an element draws, children included. List several functions separated by spaces.

backdrop-filter: blur(8px);

backdrop-filter blurs or recolors whatever shows through behind an element. It is the go-to property for frosted-glass panels.

opacity: 0.6;

opacity sets how opaque an entire element is: 0 is fully transparent and 1 leaves it as is. Children fade along with it.

mix-blend-mode: multiply;

mix-blend-mode sets how an element’s colors mix with whatever is drawn behind it, just like the blend modes in image editors.

mask-image: linear-gradient(to bottom, #000000 40%, #00000000);

mask-image uses the transparency of an image or gradient to let parts of an element show through, for soft fades or pattern-shaped cutouts.

clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

clip-path cuts an element down to a shape. Everything outside the circle, ellipse, rectangle or polygon becomes invisible.

text-shadow: 2px 4px 6px #0f172a40;

text-shadow casts shadows that follow the shape of the text. Separate several shadows with commas to layer them.

text-decoration: underline wavy #e66465 3px;

text-decoration is a shorthand for drawing underlines, overlines and strikethroughs. It takes the line kind, style, color and thickness in any order.

-webkit-text-stroke: 3px #4a86cb;

-webkit-text-stroke draws a line along the outline of the text. It is a shorthand taking a width and a color in any order.

text-transform: uppercase;

text-transform changes the case of letters, or half-width to full-width, purely in how the text is displayed.

letter-spacing: 0.2em;

letter-spacing adds space between characters. Negative values pull them closer together.

text-underline-offset: 12px;

text-underline-offset sets how far below the text an underline is drawn, for example to drop link underlines a little.

text-emphasis: filled sesame #e66465;

text-emphasis is a shorthand that puts an emphasis mark on every character, as in Japanese and Chinese typography. It sets the mark shape and color together.

text-emphasis-position: under;

text-emphasis-position sets which side of the text the emphasis marks (text-emphasis) go on: above or below in horizontal text, right or left in vertical text.

font-weight: 300;

font-weight sets how thick the text is, as a number from 1 to 1000 or a keyword such as normal or bold.

font-style: italic;

font-style sets whether text is slanted. You can choose the italic face (italic) or the regular glyphs slanted (oblique).

line-height: 2;

line-height sets the height of each line. A unitless number means a multiple of the font size.

word-spacing: 0.5em;

word-spacing sets extra width added to the spaces between words. Negative values pull words closer together.

word-break: break-all;

word-break changes the rules for where lines may wrap. It can break English words mid-word or wrap Japanese at phrase boundaries.

overflow-wrap: anywhere;

overflow-wrap sets whether long words and URLs that would overflow their box may wrap in the middle.

text-align: center;

text-align sets which side the text in each line leans toward. It can also center or justify the text.

text-indent: 2em;

text-indent sets the indentation of the first line of a paragraph. Negative values push the first line out to the left.

writing-mode: vertical-rl;

writing-mode sets whether text runs horizontally or vertically, and which way lines advance. Japanese vertical text uses vertical-rl.

text-orientation: upright;

text-orientation sets whether characters stand upright or lie sideways in vertical text. Use it to stack Latin letters upright.

white-space: pre-wrap;

white-space decides how the spaces and line breaks written in the HTML are handled, and whether lines wrap.

text-wrap: balance;

text-wrap decides whether lines wrap and how the break points are chosen. It can even out the line lengths of a heading or avoid a single word on the last line.

text-overflow: ellipsis;

text-overflow decides how text that overflows its box ends. With ellipsis, the cut is marked with "…".

-webkit-line-clamp: 2;

-webkit-line-clamp cuts text off after a set number of lines and adds "…" at the end of the last one. It is handy for keeping card descriptions to two or three lines.

transform: translateX(40px) rotate(15deg);

transform moves, rotates, scales and skews an element. List several functions separated by spaces and they combine in order.

object-fit: contain;

object-fit sets how the content of an img or video fits inside the element’s frame. Use it to show images whose aspect ratio differs from the frame without distorting them.

object-position: 25% 75%;

object-position sets where the content of an img or video sits inside the element’s frame. It is written just like background-position.