The display property specifies the display behavior (the type of rendering box) of an element.

In HTML, the default display property value is taken from the HTML specifications or from the browser/user default style sheet. The default value in XML is inline, including SVG elements.

Note: The values "flex" and "inline-flex" requires the -webkit- prefix to work in Safari.

Note: "display: contents" does not work in Edge prior version 79.

display: inline

The align-content property modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines.

Note: There must be multiple lines of items for this property to have any effect!

Tip: Use the justify-content property to align the items on the main-axis (horizontally).

align-content: center

The align-items property specifies the default alignment for items inside the flexible container.

Tip: Use the align-self property of each item to override the align-items property.

align-items: center

The align-self property specifies the alignment for the selected item inside the flexible container.

Note: The align-self property overrides the flexible container's align-items property.

align-self: center

The justify-content property aligns the flexible container's items when the items do not use all available space on the main-axis (horizontally).

Tip: Use the align-items property to align the items vertically.

justify-content: center

The position property specifies the type of positioning method used for an element (static, relative, absolute, fixed, or sticky).

Note: The sticky value is not supported in Internet Explorer or Edge 15 and earlier versions.

position: absolute

What happens if an image is larger than its containing element?

The clip property lets you specify a rectangle to clip an absolutely positioned element. The rectangle is specified as four coordinates, all from the top-left corner of the element to be clipped.

Note: The clip property does not work if "overflow:visible".

Note: The clip property is deprecated and will be replaced by the clip-path property in the future.

clip: rect(0px,60px,200px,0px)

The perspective property is used to give a 3D-positioned element some perspective.

The perspective property defines how far the object is away from the user. So, a lower value will result in a more intensive 3D effect than a higher value.

When defining the perspective property for an element, it is the CHILD elements that get the perspective view, NOT the element itself.

Tip: Also look at the perspective-origin property, which defines at which position the user is looking at the 3D object.

perspective: 100px

The perspective-origin property defines at from which position the user is looking at the 3D-positioned element.

When defining the perspective-origin property for an element, it is the CHILD elements that will get the effect, NOT the element itself.

Note: This property must be used in conjunction with the perspective property!

perspective-origin: left

The order property specifies the order of a flexible item relative to the rest of the flexible items inside the same container.

Note: If the element is not a flexible item, the order property has no effect.

div#myRedDIV {order: 2;}

div#myBlueDIV {order: 4;}

div#myGreenDIV {order: 3;}

div#myPinkDIV {order: 1;}

The float property specifies whether an element should float to the left, right, or not at all.

Note: Absolutely positioned elements ignore the float property!

Note: Elements next to a floating element will flow around it. To avoid this, use the clear property or the clearfix hack (see example at the bottom of this page).

float: right

The clear property controls the flow next to floated elements.

The clear property specifies what should happen with the element that is next to a floating element.

clear: left

The object-position property is used together with object-fit to specify how an <img> or <video> should be positioned with x/y coordinates inside its "own content box".

object-fit: none;

object-position: 5px 10%;

The vertical-align property sets the vertical alignment of an element.

vertical-align: sub

The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display:flex elements).

Note: If two positioned elements overlap without a z-index specified, the element positioned last in the HTML code will be shown on top.

z-index: -1;

The top property affects the vertical position of a positioned element. This property has no effect on non-positioned elements.

• If position: absolute; or position: fixed; - the top property sets the top edge of an element to a unit above/below the top edge of its nearest positioned ancestor.

• If position: relative; - the top property makes the element's top edge to move above/below its normal position.

• If position: sticky; - the top property behaves like its position is relative when the element is inside the viewport, and like its position is fixed when it is outside.

• If position: static; - the top property has no effect.

top: 50px;

The right property affects the horizontal position of a positioned element. This property has no effect on non-positioned elements.

• If position: absolute; or position: fixed; - the right property sets the right edge of an element to a unit to the right of the right edge of its nearest positioned ancestor.

• If position: relative; - the right property sets the right edge of an element to a unit to the left/right of its normal position.

• If position: sticky; - the right property behaves like its position is relative when the element is inside the viewport, and like its position is fixed when it is outside.

• If position: static; - the right property has no effect.

right: 150px;

The bottom property affects the vertical position of a positioned element. This property has no effect on non-positioned elements.

• If position: absolute; or position: fixed; - the bottom property sets the bottom edge of an element to a unit above/below the bottom edge of its nearest positioned ancestor.

• If position: relative; - the bottom property makes the element's bottom edge to move above/below its normal position.

• If position: sticky; - the bottom property behaves like its position is relative when the element is inside the viewport, and like its position is fixed when it is outside.

• If position: static; - the bottom property has no effect.

bottom: 10px;

The left property affects the horizontal position of a positioned element. This property has no effect on non-positioned elements.

• If position: absolute; or position: fixed; - the left property sets the left edge of an element to a unit to the left of the left edge of its nearest positioned ancestor.

• If position: relative; - the left property sets the left edge of an element to a unit to the left/right of its normal position.

• If position: sticky; - the left property behaves like its position is relative when the element is inside the viewport, and like its position is fixed when it is outside.

• If position: static; - the left property has no effect.

left: 150px;

The margin property sets the margins for an element, and is a shorthand property for the following properties:

• • margin-top

• • margin-right

• • margin-bottom

• • margin-left

If the margin property has four values:

margin: 10px 5px 15px 20px;

• top margin is 10px

• right margin is 5px

• bottom margin is 15px

• left margin is 20px

If the margin property has three values:

margin: 10px 5px 15px;

• top margin is 10px

• right and left margins are 5px

• bottom margin is 15px

If the margin property has two values:

margin: 10px 5px;

• top and bottom margins are 10px

• right and left margins are 5px

If the margin property has one value:

margin: 10px;

• all four margins are 10px

An element's padding is the space between its content and its border.

The padding property is a shorthand property for:

• padding-top

• padding-right

• padding-bottom

• padding-left

Note: Padding creates extra space within an element, while margin creates extra space around an element.

If the padding property has four values:

padding:10px 5px 15px 20px;

• top padding is 10px

• right padding is 5px

• bottom padding is 15px

• left padding is 20px

If the padding property has three values:

padding:10px 5px 15px;

• top padding is 10px

• right and left padding are 5px

• bottom padding is 15px

If the padding property has two values:

padding:10px 5px;

• top and bottom padding are 10px

• right and left padding are 5px

If the padding property has one value:

padding:10px;

• all four paddings are 10px

The break-after property specifies whether or not a page break, column break, or region break should occur after the specified element.

The break-after property extends the CSS2 page-break-after property.

Using break-after, you can tell the browser to break the page, column, or region after the element the break-afterproperty is applied to, or avoid the element to be split and span across two pages.

break-after: always;

The break-before property specifies whether or not a page break, column break, or region break should occur before the specified element.

The break-before property extends the CSS2 page-break-before property.

Using break-before, you can tell the browser to break the page, column, or region before the element the break-before property is applied to, or avoid the element to be split and span across two pages.

break-before: always;

The break-inside property specifies whether or not a page break, column break, or region break should occur inside the specified element.

The break-inside property extends then CSS2 page-break-inside property.

With break-inside, you can tell the browser to avoid breaks inside images, code snippets, tables, and listst.

The page-break-after property adds a page-break after a specified element.

Tip:The properties: page-break-before, page-break-after and page-break-inside help to define how a document should behave when printed.

Note:You cannot use this property on an empty <div> or on absolutely positioned elements.

page-break-after: always;

The page-break-before property adds a page-break before a specified element..

Tip: The properties: page-break-before, page-break-after and page-break-inside help to define how a document should behave when printed.

Note: You cannot use this property on an empty <div> or on absolutely positioned elements.

Note: None of the browsers support "avoid".

Note: Browsers may interpret "left" and "right" as "always".

page-break-before: always;

The page-break-inside property sets whether a page-break should be avoided inside a specified element.

Tip: The properties: page-break-before, page-break-after and page-break-inside help to define how a document should behave when printed.

Note: You cannot use this property on absolutely positioned elements.

page-break-inside: avoid;

The widows property specifies the minimum number of lines that must be left at the top of a page or column.

widows: 2;

The orphans property specifies the minimum number of lines that must be left at the bottom of a page or column.

orphans: 4;

The flex property is a shorthand property for:

• • flex-grow

• • flex-shrink

• • flex-basis

The flex property sets the flexible length on flexible items.

Note: If the element is not a flexible item, the flex property has no effect.

flex: 1 8 2;

The flex-grow property specifies how much the item will grow relative to the rest of the flexible items inside the same container.

Note: If the element is not a flexible item, the flex-grow property has no effect.

flex-grow: 1;

The flex-shrink property specifies how the item will shrink relative to the rest of the flexible items inside the same container.

flex-shrink: 3;

The flex-basis property specifies the initial length of a flexible item.

Note: If the element is not a flexible item, the flex-basis property has no effect.

flex-basis: 100px;

The flex-flow property is a shorthand property for:

• flex-direction

• flex-wrap

Note: If the elements are not flexible items, the flex-flow property has no effect.

flex-flow: row-reverse wrap;

The flex-direction property specifies the direction of the flexible items.

Note: If the element is not a flexible item, the flex-direction property has no effect.

flex-direction: row-reverse;

The flex-wrap property specifies whether the flexible items should wrap or not.

Note: If the elements are not flexible items, the flex-wrap property has no effect.

flex-wrap: wrap

The height property sets the height of an element.

The height of an element does not include padding, borders, or margins!

If height: auto; the element will automatically adjust its height to allow its content to be displayed correctly.

If height is set to a numeric value (like pixels, (r)em, percentages) then if the content does not fit within the specified height, it will overflow. How the container will handle the overflowing content is defined by the overflow property.

Note: The min-height and max-height properties override the height property.

height: 50px;

The width property sets the width of an element.

The width of an element does not include padding, borders, or margins!

Note: The min-width and max-width properties override the width property.

width: 150px;

The max-height property defines the maximum height of an element.

If the content is larger than the maximum height, it will overflow. How the container will handle the overflowing content is defined by the overflow property.

If the content is smaller than the maximum height, the max-height property has no effect.

Note: This prevents the value of the height property from becoming larger than max-height. The value of the max-height property overrides the height property.

max-height: 50px;

The max-width property defines the maximum width of an element.

If the content is larger than the maximum width, it will automatically change the height of the element.

If the content is smaller than the maximum width, the max-width property has no effect.

Note: This prevents the value of the width property from becoming larger than max-width. The value of the max-widthproperty overrides the width property.

max-width: 150px;

The min-height property defines the minimum height of an element.

If the content is smaller than the minimum height, the minimum height will be applied.

If the content is larger than the minimum height, the min-height property has no effect.

Note: This prevents the value of the height property from becoming smaller than min-height.

min-height: 200px;

The min-width property defines the minimum width of an element.

If the content is smaller than the minimum width, the minimum width will be applied.

If the content is larger than the minimum width, the min-width property has no effect.

Note: This prevents the value of the width property from becoming smaller than min-width.

min-width: 500px;

The box-sizing property defines how the width and height of an element are calculated: should they include padding and borders, or not.

box-sizing: border-box;

The object-fit property is used to specify how an <img> or <video> should be resized to fit its container.

This property tells the content to fill the container in a variety of ways; such as "preserve that aspect ratio" or "stretch up and take up as much space as possible".

object-fit: cover;

The resize property defines if (and how) an element is resizable by the user.

Note: The resize property does not apply to inline elements or to block elements where overflow="visible". So, make sure that overflow is set to "scroll", "auto", or "hidden".

resize: both;

The columns property is a shorthand property for:

• column-width

• column-count

columns: 100px 3;

The column-width property specifies the column width.

The number of columns will be the minimum number of columns needed to show all the content across the element.

column-width is a flexible property. Think of column-width as a minimum width suggestion for the browser. Once the browser cannot fit at least two columns at your specified width then the columns will stop and drop into a single column.

column-width: 100px;

The column-count property specifies the number of columns an element should be divided into.

column-count: 3;

The column-rule property sets the width, style, and color of the rule between columns.

This property is a shorthand property for:

• column-rule-width

• column-rule-style (required)

• column-rule-color

If column-rule-color is omitted, the color applied will be the color of the text.

column-rule: 4px double #ff00ff;

The column-rule-width property specifies the width of the rule between columns.

column-rule-width: 10px;

The column-rule-style property specifies the style of the rule between columns.

column-rule-style: dotted;

The column-rule-color property specifies the color of the rule between columns.

column-rule-color: #ff0000;

The column-fill property specifies how to fill columns, balanced or not.

Tip: If you add a height to a multi-column element, you can control how the content fills the columns. The content can be balanced or filled sequentially.

column-fill: balance;

The column-gap property specifies the gap between the columns.

Note: If there is a column-rule between columns, it will appear in the middle of the gap.

column-gap: 40px;

The column-span property specifies how many columns an element should span across.

column-span: all;

The table-layout property defines the algorithm used to lay out table cells, rows, and columns.

Tip: The main benefit of table-layout: fixed; is that the table renders much faster. On large tables, users will not see any part of the table until the browser has rendered the whole table. So, if you use table-layout: fixed, users will see the top of the table while the browser loads and renders rest of the table. This gives the impression that the page loads a lot quicker!

table-layout: fixed;

The grid property is a shorthand property for:

• grid-template-rows

• grid-template-columns

• grid-template-areas

• grid-auto-rows

• grid-auto-columns

• grid-auto-flow

grid: 150px / auto auto auto;

The grid-template property is a shorthand property for the following properties:

• grid-template-rows

• grid-template-columns

• grid-template-areas

grid-template: 150px / auto auto auto;

The grid-template-rows property specifies the number (and the heights) of the rows in a grid layout.

The values are a space-separated list, where each value specifies the height of the respective row.

grid-template-rows: 100px 300px;

The grid-template-columns property specifies the number (and the widths) of columns in a grid layout.

The values are a space separated list, where each value specifies the size of the respective column.

grid-template-columns: auto auto auto auto;

The grid-template-areas property specifies areas within the grid layout.

You can name grid items by using the grid-area property, and then reference to the name in the grid-template-areasproperty.

Each area is defined by apostrophes. Use a period sign to refer to a grid item with no name.

grid-template-areas: "myArea myArea . . .";

The grid-auto-rows property sets a size for the rows in a grid container.

This property affects only rows with the size not set.

grid-auto-rows: 150px;

The grid-auto-columns property sets a size for the columns in a grid container.

This property affects only columns with the size not set.

grid-auto-columns: 50px;

The grid-auto-flow property controls how auto-placed items get inserted in the grid.

grid-auto-flow: column;

The grid-area property specifies a grid item's size and location in a grid layout, and is a shorthand property for the following properties:

• grid-row-start

• grid-column-start

• grid-row-end

• grid-column-end

The grid-area property can also be used to assign a name to a grid item. Named grid items can then be referenced to by the grid-template-areas property of the grid container. See examples below.

grid-area: 2 / 1 / span 2 / span 3;

grid-area: myArea;

The grid-row property specifies a grid item's size and location in a grid layout, and is a shorthand property for the following properties:

• grid-row-start

• grid-row-end

grid-row: 1 / span 2;

The grid-row-start property defines on which row-line the item will start.

grid-row-start: 2;

The grid-row-end property defines how many rows an item will span, or on which row-line the item will end (see example at the end of this page).

grid-row-end: span 3;

The grid-column property specifies a grid item's size and location in a grid layout, and is a shorthand property for the following properties:

• grid-column-start

• grid-column-end

grid-column: 1 / span 2;

The grid-column-start property defines on which column-line the item will start.

grid-column-start: 2;

The grid-column-end property defines how many columns an item will span, or on which column-line the item will end (see example at the end of this page).

grid-column-end: span 3;

The grid-gap property defines the size of the gap between the rows and columns in a grid layout, and is a shorthand property for the following properties:

• grid-row-gap

• grid-column-gap

Note: This property was renamed to gap in CSS3.

grid-gap: 50px;

The grid-row-gap property defines the size of the gap between the rows in a grid layout.

Note: This property was renamed to row-gap in CSS3.

grid-row-gap: 50px;

The grid-column-gap property defines the size of the gap between the columns in a grid layout.

Note: This property was renamed to column-gap in CSS3.

grid-column-gap: 50px;

The empty-cells property sets whether or not to display borders on empty cells in a table.

Note: This property has no effect if border-collapse is "collapse".

empty-cells: hide;

The border-collapse property sets whether table borders should collapse into a single border or be separated as in standard HTML.

border-collapse: collapse;

The border-spacing property sets the distance between the borders of adjacent cells.

Note:Note: This property works only when border-collapse is separate.

border-spacing: 15px 50px;

The caption-side property specifies the placement of a table caption.

caption-side: top;

The background property is a shorthand property for:

• background-color

• background-image

• background-position

• background-size

• background-repeat

• background-origin

• background-clip

• background-attachment

It does not matter if one of the values above are missing, e.g. background:#ff0000 url(smiley.gif); is allowed.

background: lightblue url("img_tree.gif") no-repeat fixed center;

The background-color property sets the background color of an element.

The background of an element is the total size of the element, including padding and border (but not the margin).

Tip: Use a background color and a text color that makes the text easy to read.

background-color: coral;

The background-image property sets one or more background images for an element.

By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.

Tip: The background of an element is the total size of the element, including padding and border (but not the margin).

Tip: Always set a background-color to be used if the image is unavailable.

background-image: url("paper.gif");

The background-position property sets the starting position of a background image.

Tip: By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.

background-position: center;

The background-size property specifies the size of the background images.

There are four different syntaxes you can use with this property:

• Keyword syntax ("auto", "cover" and "contain"),

• One-value syntax (sets the width of the image (height becomes "auto"),

• The two-value syntax (first value: width of the image, second value: height),

• The multiple background syntax (separated with comma).

background-size: 300px 100px;

The background-repeat property sets if/how a background image will be repeated.

By default, a background-image is repeated both vertically and horizontally.

background-repeat: repeat-y;

The background-origin property specifies the origin position (the background positioning area) of a background image.

Note: This property has no effect if background-attachment is "fixed".

background-origin: content-box;

The background-clip property defines how far the background (color or image) should extend within an element.

background-clip: padding-box;

The background-attachment property sets whether a background image scrolls with the rest of the page, or is fixed.

background-attachment: fixed;

The background-blend-mode property defines the blending mode of each background layer (color and/or image).

background-blend-mode: lighten;

The border property is a shorthand property for:

• border-width

• border-style (required)

• border-color

If border-color is omitted, the color applied will be the color of the text.

border: 4px dotted blue;

The border-width property sets the width of an element's four borders. This property can have from one to four values.

border-width: thin medium thick 10px;

• top border is thin

• right border is medium

• bottom border is thick

• left border is 10p

border-width: thin medium thick;

• top border is thin

• right and left borders are medium

• bottom border is thick

border-width: thin medium;

• top and bottom borders are thin

• right and left borders are medium

border-width: thin;

• all four borders are thin

Note: Always declare the border-style property before the border-width property. An element must have borders before you can set the width.

The border-style property sets the style of an element's four borders. This property can have from one to four values.

border-style: dotted solid double dashed;

• top border is dotted

• right border is solid

• bottom border is double

• left border is dashed

border-style: dotted solid double;

• top border is dotted

• right and left borders are solid

• bottom border is double

border-style: dotted solid;

• top and bottom borders are dotted

• right and left borders are solid

border-style: dotted;

• all four borders are dotted

The border-color property sets the color of an element's four borders. This property can have from one to four values.

border-color: red green blue pink;

• top border is red

• right border is green

• bottom border is blue

• left border is pink

border-color: red green blue;

• top border is red

• right and left borders are green

• bottom border is blue

border-color: red green;

• top and bottom borders are red

• right and left borders are green

border-color: red;

• all four borders are red

Note: Always declare the border-style property before the border-color property. An element must have borders before you can change the color.

The border-radius property defines the radius of the element's corners.

Tip: This property allows you to add rounded corners to elements!

border-radius: 15px 50px 30px 5px;

• first value applies to top-left corner

• second value applies to top-right corner

• third value applies to bottom-right corner

• fourth value applies to bottom-left corner

border-radius: 15px 50px 30px;

• first value applies to top-left corner

• second value applies to top-right and bottom-left corners

• third value applies to bottom-right corner

border-radius: 15px 50px;

• first value applies to top-left and bottom-right corners

• second value applies to top-right and bottom-left corners

border-radius: 15px;

• value applies to all four corners, which are rounded equally

The border-image property allows you to specify an image to be used as the border around an element.

The border-image property is a shorthand property for:

• border-image-source

• border-image-slice

• border-image-width

• border-image-outset

• border-image-repeat

Omitted values are set to their default values.

border-image: url(border.png) 30 round;

The border-image-source property specifies the path to the image to be used as a border (instead of the normal border around an element).

Tip: If the value is "none", or if the image cannot be displayed, the border styles will be used.

border-image-source: url(border.png);

The border-image-slice property specifies how to slice the image specified by border-image-source. The image is always sliced into nine sections: four corners, four edges and the middle.

The "middle" part is treated as fully transparent, unless the fill keyword is set.

border-image-slice: 30%;

The border-image-width property specifies the width of the border image.

border-image-width: 10px;

The border-image-outset property specifies the amount by which the border image area extends beyond the border box.

border-image-outset: 10px;

The border-image-repeat property specifies whether the border image should be repeated, rounded, spaced or stretched.

border-image-repeat: repeat;

Sets the behavior of the background and border of an element at page-break, or, for in-line elements, at line-break.

-webkit-box-decoration-break: slice;

The box-shadow property attaches one or more shadows to an element.

box-shadow: 5px 10px #888888;

The visibility property specifies whether or not an element is visible.

visibility: hidden;

The opacity property sets the opacity level for an element.

The opacity-level describes the transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.

opacity: 0.5;

The cursor property specifies the mouse cursor to be displayed when pointing over an element.

cursor: zoom-in;

The caret-color property specifies the color of the cursor (caret) in inputs, textareas, or any element that is editable.

caret-color: red;

The pointer-events property defines whether or not an element reacts to pointer events.

pointer-events: auto;

The scroll-behavior property specifies whether to smoothly animate the scroll position, instead of a straight jump, when the user clicks on a link within a scrollable box.

scroll-behavior: smooth;

The filter property defines visual effects (like blur and saturation) to an element (often <img>).

scroll-behavior: smooth;

The mix-blend-mode property specifies how an element's content should blend with its direct parent background.

mix-blend-mode: darken;

The white-space property specifies how white-space inside an element is handled.

white-space: pre;

The backface-visibility property defines whether or not the back face of an element should be visible when facing the user.

The back face of an element is a mirror image of the front face being displayed.

This property is useful when an element is rotated. It lets you choose if the user should see the back face or not.

-webkit-backface-visibility: visible;

The isolation property defines whether an element must create a new stacking content.

Note: The isolation property is helpful when used with background-blend-mode or mix-blend-mode.

isolation: isolate;

Hides parts of an element by masking or clipping an image at specific places

Specifies the mask area

Represents a compositing operation used on the current mask layer with the mask layers below it

The mask-image property specifies an image to be used as a mask layer for an element.

Tip: Linear and radial gradients in CSS can also be used as the mask image.

mask-image: url(w3logo.png);

The mask-mode property specifies whether the mask layer image should be treated as a luminance mask or as an alpha mask.

mask-mode: luminance;

The mask-origin property specifies the origin position (the mask position area) of a mask layer image.

mask-origin: content-box;

The mask-position property sets the starting position of a mask image (relative to the mask position area).

Tip: By default, a mask image is placed at the top-left corner of an element, and repeated both vertically and horizontally.

mask-position: center;

The mask-repeat property sets if/how a mask image will be repeated.

By default, a mask image is repeated both vertically and horizontally.

mask-repeat: repeat;

The mask-size property specifies the size of the mask layer image.

mask-size: 70%;

Specifies whether an SVG <mask> element is treated as a luminance mask or as an alpha mask

The color property specifies the color of text.

Tip:Use a background color combined with a text color that makes the text easy to read.

color: red;

color: #00ff00;

color: rgb(0,0,255);

The font property is a shorthand property for:

• font-style

• font-variant

• font-weight

• font-size/line-height

• font-family

The font-size and font-family values are required. If one of the other values is missing, their default value are used.

Note: The line-height property sets the space between lines.

font: italic small-caps bold 12px/30px Georgia, serif;

The font-style property specifies the font style for a text.

font-style: italic;

In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text.

The font-variant property specifies whether or not a text should be displayed in a small-caps font.

font-variant: small-caps;

The font-weight property sets how thick or thin characters in text should be displayed.

font-weight: bold;

font-weight: 900;

The font-size property sets the size of a font.

font-size: 15px;

font-size: large;

font-size: 150%;

The font-family property specifies the font for an element.

The font-family property can hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font.

There are two types of font family names:

• family-name - The name of a font-family, like "times", "courier", "arial", etc.

• generic-family - The name of a generic-family, like "serif", "sans-serif", "cursive", "fantasy", "monospace".

Start with the font you want, and always end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.

Note: Separate each value with a comma.

Note: If a font name contains white-space, it must be quoted. Single quotes must be used when using the "style" attribute in HTML.

font-family: "Times New Roman", Times, serif;

font-family: Arial, Helvetica, sans-serif;

The font-size-adjust property gives you better control of the font size when the first selected font is not available.

When a font is not available, the browser uses the second specified font. This could result in a big change for the font size. To prevent this, use the font-size-adjust property.

All fonts have an "aspect value" which is the size-difference between the lowercase letter "x" and the uppercase letter "X".

When the browser knows the "aspect value" for the first selected font, the browser can figure out what font-size to use when displaying text with the second choice font.

font-size-adjust: 0.58;

The font-stretch property allows you to make text narrower (condensed) or wider (expanded).

Note: Some fonts provide additional faces; condensed faces and expanded faces. For these fonts, you can use the font-stretch property to select a normal, condensed, or expanded font face.

Note: This property has no effect if the selected font does not offer condensed or expanded faces!

font-stretch: expanded;

The font-variant-caps property controls the usage of alternate glyphs for capital letters.

font-variant-caps: unicase;

The font-feature-settings property allows control over advanced typographic features in OpenType fonts.

font-feature-settings: "frac";

The hanging-punctuation property specifies whether a punctuation mark may be placed outside the line box at the start or at the end of a full line of text.

hanging-punctuation: first;

The line-height property specifies the height of a line.

Note: Negative values are not allowed.

line-height: normal;

line-height: 1.6; //Recommended

line-height: 80%;

The text-align property specifies the horizontal alignment of text in an element.

text-align: justify;

The text-align-last property specifies how to align the last line of a text.

Notice that the text-align-last property sets the alignment for all last lines within the selected element. So, if you have a <div> with three paragraphs in it, text-align-last will apply to the last line of EACH of the paragraphs. To use text-align-last on only the last paragraph in the container, you can use :last child, see example below.

Note: In Edge prior 79, the text-align-last property only works on text that has "text-align: justify".

text-align-last: center;

The text-justify property specifies the justification method of text when text-align is set to "justify".

text-justify: inter-word;

The font-kerning property controls the usage of the kerning information stored in a font.

Tip:Kerning defines how letters are spaced.

Note: For fonts that do not include kerning data, this property will have no visible effect.

font-kerning: normal;

The letter-spacing property increases or decreases the space between characters in a text.

letter-spacing: -1px;

The tab-size property specifies the width of a tab character.

In HTML, the tab character is usually displayed as a single space-character, except for some elements, like <textarea> and <pre>, and the result of the tab-size property will only be visible for those elements.

tab-size: 16;

The text-indent property specifies the indentation of the first line in a text-block.

Note: Negative values are allowed. The first line will be indented to the left if the value is negative.

text-indent: 50px;

text-indent: -2em;

text-indent: 30%;

The word-spacing property increases or decreases the white space between words.

Note: Negative values are allowed.

word-spacing: 30px;

The list-style property is a shorthand for the following properties:

• list-style-type

• list-style-position

• list-style-image

If one of the values are missing, the default value for that property will be used.

list-style: square inside url("sqpurple.gif");

The list-style-type specifies the type of list-item marker in a list.

list-style-type: square;

The list-style-position property specifies the position of the list-item markers (bullet points).

list-style-position: outside; means that the bullet points will be outside the list item. The start of each line of a list item will be aligned vertically:

list-style-position: inside; means that the bullet points will be inside the list item. As it is part of the list item, it will be part of the text and push the text at the start:

list-style-position: inside;

The list-style-image property replaces the list-item marker with an image.

Note: Always specify the list-style-type property in addition. This property is used if the image for some reason is unavailable.

list-style-image: url('sqpurple.gif');

An outline is a line that is drawn around elements, outside the borders, to make the element "stand out".

The outline property is a shorthand property for:

• outline-width

• outline-style (required)

• outline-color

If outline-color is omitted, the color applied will be the color of the text.

Note: Outlines differ from borders! Unlike border, the outline is drawn outside the element's border, and may overlap other content. Also, the outline is NOT a part of the element's dimensions; the element's total width and height is not affected by the width of the outline.

outline: 2px dashed blue;

The outline-width specifies the width of an outline.

Note: Note: Always declare the outline-style property before the outline-width property. An element must have an outline before you change the width of it.

outline-width: thick;

An outline is a line that is drawn around elements, outside the borders, to make the element "stand out".

The outline-style property specifies the style of an outline.

outline-style: dotted;

The outline-color property specifies the color of an outline.

Note: Always declare the outline-style property before the outline-color property. An element must have an outline before you change the color of it.

outline-color: coral;

The outline-offset property adds space between the outline and the edge or border of an element.

The space between an element and its outline is transparent.

Outlines differ from borders in three ways:

• An outline is a line drawn around elements, outside the border edge

• An outline does not take up space

• An outline may be non-rectangular

outline-offset: 15px;

The text-decoration property specifies the decoration added to text, and is a shorthand property for:

• text-decoration-line (required)

• text-decoration-color

• text-decoration-style

• text-decoration-thickness

text-decoration: underline overline;

The text-decoration-line property sets the kind of text decoration to use (like underline, overline, line-through).

Note: You can also combine more than one value, like underline and overline to display lines both under and over the text.

text-decoration-line: line-through;

The text-decoration-color property specifies the color of the text-decoration (underlines, overlines, linethroughs).

text-decoration-color: red;

The text-decoration-style property sets the style of the text decoration (like solid, wavy, dotted, dashed, double).

text-decoration-style: wavy;

The text-decoration-thickness property specifies the thickness of the decoration line.

text-decoration-thickness: 50%;

The overflow property specifies what should happen if content overflows an element's box.

This property specifies whether to clip content or to add scrollbars when an element's content is too big to fit in a specified area.

Note: The overflow property only works for block elements with a specified height.

overflow: visible;

The overflow-x property specifies whether to clip the content, add a scroll bar, or display overflow content of a block-level element, when it overflows at the left and right edges.

Tip: Use the overflow-y property to determine clipping at the top and bottom edges.

overflow-x: visible;

The overflow-y property specifies whether to clip the content, add a scroll bar, or display overflow content of a block-level element, when it overflows at the top and bottom edges.

Tio: Use the overflow-x property to determine clipping at the left and right edges.

overflow-y: visible;

The word-wrap property allows long words to be able to be broken and wrap onto the next line.

word-wrap: break-word;

The word-break property specifies how words should break when reaching the end of a line.

word-break: break-all;

The text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. It can be clipped, display an ellipsis (...), or display a custom string.

Both of the following properties are required for text-overflow:

• white-space: nowrap;

• overflow: hidden;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

The overflow-wrap property specifies whether or not the browser can break lines with long words, if they overflow the container.

overflow-wrap: break-word;

The hyphens property defines whether hyphenation is allowed to create more soft wrap opportunities within a line of text.

hyphens: auto;

The text-transform property controls the capitalization of text.

text-transform: capitalize;

The quotes property sets the type of quotation marks for quotations.

quotes: "'" "'";

Quotation Mark Characters

The text-shadow property adds shadow to text.

This property accepts a comma-separated list of shadows to be applied to the text.

text-shadow: 2px 2px #ff0000;

The direction property specifies the text direction/writing direction within a block-level element.

Tip: Use this property together with the unicode-bidi property to set or return whether the text should be overridden to support multiple languages in the same document.

direction: rtl;

The writing-mode property specifies whether lines of text are laid out horizontally or vertically.

writing-mode: vertical-rl;

The user-select property specifies whether the text of an element can be selected.

user-select: none;

The @keyframes rule specifies the animation code.

The animation is created by gradually changing from one set of CSS styles to another.

During the animation, you can change the set of CSS styles many times.

Specify when the style change will happen in percent, or with the keywords "from" and "to", which is the same as 0% and 100%. 0% is the beginning of the animation, 100% is when the animation is complete.

Tip: For best browser support, you should always define both the 0% and the 100% selectors.

Note: Use the animation properties to control the appearance of the animation, and also to bind the animation to selectors.

Note: The !important rule is ignored in a keyframe (See last example on this page).

@keyframes mymove {

from {top: 0px;}

to {top: 200px;}

}

The animation property is a shorthand property for:

• animation-name

• animation-duration

• animation-timing-function

• animation-delay

• animation-iteration-count

• animation-direction

• animation-fill-mode

• animation-play-state

Note: Always specify the animation-duration property, otherwise the duration is 0, and will never be played.

animation: mymove 5s infinite;

The animation-name property specifies a name for the @keyframes animation.

animation-name: mymove;

The animation-duration property defines how long an animation should take to complete one cycle.

animation-duration: 3s;

The animation-timing-function specifies the speed curve of an animation.

The speed curve defines the TIME an animation uses to change from one set of CSS styles to another.

The speed curve is used to make the changes smoothly.

animation-timing-function: linear;

The animation-delay property specifies a delay for the start of an animation.

The animation-delay value is defined in seconds (s) or milliseconds (ms).

animation-delay: 2s;

The animation-iteration-count property specifies the number of times an animation should be played.

animation-iteration-count: 2;

The animation-direction property defines whether an animation should be played forwards, backwards or in alternate cycles.

animation-direction: alternate;

The animation-fill-mode property specifies a style for the element when the animation is not playing (before it starts, after it ends, or both).

CSS animations do not affect the element before the first keyframe is played or after the last keyframe is played. The animation-fill-mode property can override this behavior.

animation-fill-mode: forwards;

The animation-play-state property specifies whether the animation is running or paused.

Note: Use this property in a JavaScript to pause an animation in the middle of a cycle.

animation-play-state: paused;

The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.

transform: rotate(20deg);

transform: skewY(20deg);

transform: scaleY(1.5);

The transform-origin property allows you to change the position of transformed elements.

2D transformations can change the x- and y-axis of an element. 3D transformations can also change the z-axis of an element.

Note: This property must be used together with the transform property.

transform-origin: 20% 40%;

The transform-style property specifies how nested elements are rendered in 3D space.

Note: This property must be used together with the transform property.

transform-style: preserve-3d;

The transition property is a shorthand property for:

• transition-property

• transition-duration

• transition-timing-function

• transition-delay

Note: Always specify the transition-duration property, otherwise the duration is 0s, and the transition will have no effect.

transition: width 2s;

The transition-property property specifies the name of the CSS property the transition effect is for (the transition effect will start when the specified CSS property changes).

Tip: A transition effect could typically occur when a user hover over an element.

transition-property: width;

The transition-duration property specifies how many seconds (s) or milliseconds (ms) a transition effect takes to complete.

transition-duration: 5s;

The transition-timing-function property specifies the speed curve of the transition effect.

This property allows a transition effect to change speed over its duration.

transition-timing-function: linear;

The transition-delay property specifies when the transition effect will start.

The transition-delay value is defined in seconds (s) or milliseconds (ms).

transition-delay: 2s;

The @charset rule specifies the character encoding used in the style sheet.

The @charset rule must be the first element in the style sheet and not be preceded by any character. If several @charsetrules are defined, only the first one is used. The @charset rule cannot be used inside a style attribute (on an HTML element), or inside the <style> element where the character set of the HTML page is relevant.

@charset "UTF-8";

With the @font-face rule, web designers do not have to use one of the "web-safe" fonts anymore.

In the @font-face rule you must first define a name for the font (e.g. myFirstFont), and then point to the font file.

To use the font for an HTML element, refer to the name of the font (myFirstFont) through the font-family property:

@font-face {

font-family: myFirstFont;

src: url(sansation_light.woff);

}

The @import rule allows you to import a style sheet into another style sheet.

The @import rule must be at the top of the document (but after any @charset declaration).

The @import rule also supports media queries, so you can allow the import to be media-dependent.

@import "navigation.css"; /* Using a string */

or

@import url("navigation.css"); /* Using a url */

The @media rule is used in media queries to apply different styles for different media types/devices.

Media queries can be used to check many things, such as:

• width and height of the viewport

• width and height of the device

• orientation (is the tablet/phone in landscape or portrait mode?)

• resolution

Using media queries are a popular technique for delivering a tailored style sheet (responsive web design) to desktops, laptops, tablets, and mobile phones.

You can also use media queries to specify that certain styles are only for printed documents or for screen readers (mediatype: print, screen, or speech).

In addition to media types, there are also media features. Media features provide more specific details to media queries, by allowing to test for a specific feature of the user agent or display device. For example, you can apply styles to only those screens that are greater, or smaller, than a certain width.

Syntax:

@media not|only mediatype and (mediafeature and|or|not mediafeature) {

CSS-Code;

}

Example:

@media only screen and (max-width: 600px) {

body {

background-color: lightblue;

}

}

Media Types

Media Features

The all property resets all properties, apart from unicode-bidi and direction, to their initial or inherited value.

all: initial;

The content property is used with the ::before and ::after pseudo-elements, to insert generated content.

content: " (" attr(href) ")";

The counter-increment property increases or decreases the value of one or more CSS counters.

The counter-increment property is usually used together with the counter-reset property and the content property.

body {

/* Set "my-sec-counter" to 0 */

counter-reset: my-sec-counter;

}

h2::before {

/* Increment "my-sec-counter" by 1 */

counter-increment: my-sec-counter;

content: "Section " counter(my-sec-counter) ". ";

}

The counter-reset property creates or resets one or more CSS counters.

The counter-reset property is usually used together with the counter-increment property and the content property.

The image-rendering property specifies the type of algorithm to be used for image scaling.

Note: This property has no effect on images that are not scaled.

image-rendering: high-quality;

Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document

The .class selector selects elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the name of the class.

You can also specify that only specific HTML elements should be affected by a class. To do this, start with the element name, then write the period (.) character, followed by the name of the class (look at Example 1 below).

HTML elements can also refer to more than one class (look at Example 2 below).

.intro {}

The #id selector styles the element with the specified id.

#firstname {}

The * selector selects all elements.

The * selector can also select all elements inside another element (See "More Examples").

* {}

The element selector selects all elements with the specified element name.

p {}

The [attribute] selector is used to select elements with the specified attribute.

a[target] {}

The :active selector is used to select and style the active link.

A link becomes active when you click on it.

Tip: The :active selector can be used on all elements, not only links.

Tip: Use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the :hoverselector to style links when you mouse over them.

Note: :active MUST come after :hover (if present) in the CSS definition in order to be effective!

a:active {}

The :link selector is used to select unvisited links.

Tip: The :link selector does not style links you have already visited.

Note: Use the :visited selector to style links to visited pages, the :hover selector to style links when you mouse over them, and the :active selector to style links when you click on them.

a:link {}

The :visited selector is used to select visited links.

Browsers limits the styles that can be set for a:visited links, due to security issues.

Allowed styles are:

• color

• background-color

• border-color (and border-color for separate sides)

• outline color

• column-rule-color

• the color parts of fill and stroke

All other styles are inherited from a:link.

a:visited {}

The :hover selector is used to select elements when you mouse over them.

Tip: The :hover selector can be used on all elements, not only on links.

Note: :hover MUST come after :link and :visited (if they are present) in the CSS definition, in order to be effective!

a:hover {}

The ::after selector inserts something after the content of each selected element(s).

Use the content property to specify the content to insert.

p::after {

content: " - Remember this";

}

The ::before selector inserts something before the content of each selected element(s).

Use the content property to specify the content to insert.

p::before {

content: "Read this: ";

}

The :first-child selector is used to select the specified selector, only if it is the first child of its parent.

p:first-child {}

The :nth-child(n) selector matches every element that is the nth child of its parent.

n can be a number, a keyword (odd or even), or a formula (like an + b).

div:nth-child(2) {}

The :nth-last-child(n) selector matches every element that is the nth child, regardless of type, of its parent, counting from the last child.

p:nth-last-child(2) {}

The :last-child selector matches every element that is the last child of its parent.

Tip: p:last-child is equal to p:nth-last-child(1).

p:last-child {}

The :only-child selector matches every element that is the only child of its parent.

p:only-child {}

The ::first-letter selector is used to add a style to the first letter of the specified selector.

Note: The following properties can be used with ::first-letter:

• font properties

• color properties

• background properties

• margin properties

• padding properties

• border properties

• text-decoration

• vertical-align (only if float is 'none')

• text-transform

• line-height

• float

• clear

Note: The ::first-letter selector can only be used with block-level elements.

p::first-letter {}

The ::first-line selector is used to add a style to the first line of the specified selector.

Note: The following properties can be used with ::first-line:

• font properties

• color properties

• background properties

• word-spacing

• letter-spacing

• text-decoration

• vertical-align

• text-transform

• line-height

• clear

Note: The ::first-line selector can only be used with block-level elements.

p::first-line {}

The :first-of-type selector matches every element that is the first child, of a particular type, of its parent.

Tip: This is the same as :nth-of-type(1).

p:first-of-type {}

The :nth-of-type(n) selector matches every element that is the nth child, of the same type (tag name), of its parent.

div:nth-of-type(2) {}

The :nth-last-of-type(n) selector matches every element that is the nth child, of a particular type, of its parent, counting from the last child.

p:nth-last-of-type(2) {}

The :last-of-type selector matches every element that is the last child, of a particular type, of its parent.

Tip: This is the same as :nth-last-of-type(1).

p:last-of-type {}

The :only-of-type selector matches every element that is the only child of its type, of its parent.

p:only-of-type {}

The :not(selector) selector matches every element that is NOT the specified element/selector.

:not(p) {}

The :root selector matches the document's root element.

In HTML, the root element is always the html element.

:root {}

The :lang() selector is used to select elements with a lang attribute with the specified value.

p:lang(it) {}

The :fullscreen selector is used to select the element(s) that is in full-screen mode.

:fullscreen {}

The ::marker selector selects the marker of a list item. (Bullet Points)

This selector works on any element set to display:list-item.

::marker {}

The ::selection selector matches the portion of an element that is selected by a user (Highlighted).

Only a few CSS properties can be applied to the ::selection selector: color, background, cursor, and outline.

::selection {}

The :empty selector matches every element that has no children (including text nodes).

p:empty {}

URLs with an # followed by an anchor name link to a certain element within a document. The element being linked to is the target element.

The :target selector can be used to style the current active target element.

:target {}

The :required selector selects form elements which are required.

Form elements with a required attribute are defined as required.

Note: The :required selector only applies to the form elements: input, select and textarea.

input:required {}

The :optional selector selects form elements which are optional.

Form elements with no required attribute are defined as optional.

Note: The :optional selector only applies to the form elements: input, select and textarea.

input:optional {}

The ::placeholder selector selects form elements with placeholder text, and let you style the placeholder text.

The placeholder text is set with the placeholder attribute, which specifies a hint that describes the expected value of an input field.

Tip: The default color of the placeholder text is light grey in most browsers.

::placeholder {}

The :read-only selector selects elements which are "readonly".

Form elements with a "readonly" attribute are defined as "readonly".

input:read-only {}

The :read-write selector selects form elements which are "readable" and "writeable".

Form elements with no "readonly" attribute, and no "disabled" attribute are defined as "read-" and "write-able".

input:read-write {}

The :focus selector is used to select the element that has focus.

Tip: The :focus selector is allowed on elements that accept keyboard events or other user inputs.

The :in-range selector selects all elements with a value that is within a specified range.

Note: The :in-range selector only works for input elements with min and/or max attributes!

Tip: Use the :out-of-range selector to select all elements with a value that is outside a specified range.

input:in-range {}

The :out-of-range selector selects all elements with a value that is outside a specified range.

Note: The :out-of-range selector only works for input elements with min and/or max attributes!

input:out-of-range {}

The :checked selector matches every checked <input> element (only for radio buttons and checkboxes) and <option> element.

input:checked {}

The :default selector selects the default form element in a group of related elements.

The :default selector can only be used on <button>, <input type="checkbox">, <input type="radio">, and <option> elements

input:default {}

The :disabled selector matches every disabled element (mostly used on form elements).

input[type="text"]:disabled {}

The :enabled selector matches every enabled element (mostly used on form elements).

input[type="text"]:enabled {}

The :indeterminate selector selects form elements that are in an indeterminate state.

The :indeterminate selector can only be used on <input type="checkbox">, <input type="radio">, and <progress> elements.

Note: Checkboxes cannot be indeterminate with HTML - it is a property of the checkbox object, which can be set to true by JavaScript.

Radio buttons are indeterminate when all radio buttons with the same name value in the form are unchecked.

input:indeterminate {}

The :valid selector selects form elements with a value that validates according to the element's settings.

Note: The :valid selector only works for form elements with limitations, such as input elements with min and max attributes, email fields with a legal email, or number fields with a numeric value, etc.

input:valid {}

The :valid selector selects form elements with a value that validates according to the element's settings.

Note: The :valid selector only works for form elements with limitations, such as input elements with min and max attributes, email fields with a legal email, or number fields with a numeric value, etc.

input:valid {}

The attr() function returns the value of an attribute of the selected elements.

content: " (" attr(href) ")";

The calc() function performs a calculation to be used as the property value.

width: calc(100% - 100px);

The counter() function returns the current value of the named counter, as a string.

counter-increment: section;

content: "Section " counter(section) ": ";

The cubic-bezier() function defines a Cubic Bezier curve.

A Cubic Bezier curve is defined by four points P0, P1, P2, and P3. P0 and P3 are the start and the end of the curve and, in CSS these points are fixed as the coordinates are ratios. P0 is (0, 0) and represents the initial time and the initial state, P3 is (1, 1) and represents the final time and the final state.

The cubic-bezier() function can be used with the animation-timing-function property and the transition-timing-functionproperty.

transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);

The max() function uses the largest value, from a comma-separated list of values, as the property value.

width: max(50%, 300px);

The min() function uses the smallest value, from a comma-separated list of values, as the property value.

width: min(50%, 300px);

The var() function is used to insert the value of a CSS variable.

background-color: var(--main-bg-color)

:root {

--main-bg-color: coral;

}

#div1 {

background-color: var(--main-bg-color);

padding: 5px;

}

The rgb() function define colors using the Red-green-blue (RGB) model.

An RGB color value is specified with: rgb(red, green, blue). Each parameter defines the intensity of that color and can be an integer between 0 and 255 or a percentage value (from 0% to 100%).

For example, the rgb(0,0,255) value is rendered as blue, because the blue parameter is set to its highest value (255) and the others are set to 0.

background-color:rgb(0,0,255);

The rgba() function define colors using the Red-green-blue-alpha (RGBA) model.

RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity of the color.

background-color:rgba(0,0,255,0.3);

The hsl() function define colors using the Hue-saturation-lightness model (HSL).

HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors.

background-color:hsl(120,100%,75%);

The hsla() function define colors using the Hue-saturation-lightness-alpha model (HSLA).

HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity of the color.

background-color:hsla(120,100%,25%,0.3);

The linear-gradient() function sets a linear gradient as the background image.

To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.

background-image: linear-gradient(to bottom right, red , blue);

The repeating-linear-gradient() function is used to repeat linear gradients.

background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

The radial-gradient() function sets a radial gradient as the background image.

A radial gradient is defined by its center.

To create a radial gradient you must define at least two color stops.

background-image: radial-gradient(red, green, blue);

The repeating-radial-gradient() function is used to repeat radial gradients.

background-image: repeating-radial-gradient(red, yellow 10%, green 15%);

The conic-gradient() function sets a conic gradient as the background image.

A conic gradient is a gradient with color transitions rotated around a center point.

To create a conic gradient you must define at least two color stops.

background-image: conic-gradient(red, yellow, green);

The repeating-conic-gradient() function is used to repeat conic gradients.

background-image: repeating-conic-gradient(red 10%, yellow 20%);