CSS - Attributes

accent-color

accent-color: auto | color | initial | inherit;


color

(rgb, hex, named-color, etc)

aspect-ratio

aspect-ratio: number / number | initial | inherit;


The aspect-ratio property allows you to define the ratio between width and height of an element. If aspect-ratio and width properties are set, the height will follow in the defined aspect ratio.


Tip: Use the aspect-ratio property in responsive layouts where elements often vary in size and you want to preserve the ratio between width and height.


  • number - First number specifies the number for width in aspect ratio.
  • number - Second number specifies the number for height in aspect ratio. Optional. If not set, number for height is 1 as default.
  • initial - Sets this property to its default value.
  • inherit - Inherits this property from its parent element.

backdrop-filter

backdrop-filter: none | filter | initial | inherit;


A space-separated list of filter-functions like:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • sepia()
  • saturate()

backface-visibility

backface-visibility: visible | hidden | initial | inherit;


  • visible - Default value. The backside is visible.
  • hidden - The backside is not visible.
  • initial - Sets this property to its default value.
  • inherit - Inherits this property from its parent element.

background-blend-mode

background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity;

background-clip

background-clip: border-box | padding-box | content-box | initial | inherit;

caret-color

caret-color : auto | color | initial | inherit;


color

(rgb, hex, named-color, etc)

clamp

The clamp() function clamps a middle value within a range of values between a defined minimum bound and a maximum bound. The function takes three parameters: a minimum value, a preferred value, and a maximum allowed value.


clamp(min, val, max)
  • min - The minimum value is the smallest (most negative) value. This is the lower bound in the range of allowed values. If the preferred value is less than this value, the minimum value will be used.
  • val - The preferred value is the expression whose value will be used as long as the result is between the minimum and maximum values.
  • max - The maximum value is the largest (most positive) expression value to which the value of the property will be assigned if the preferred value is greater than this upper bound.

clip

clip: auto | shape | initial | inherit;


shape

rect (top, right, bottom, left)

clip-path

clip-path: clip-source | basic-shape | margin-box | border-box | padding-box | content-box | fill-box | stroke-box | view-box | none | initial | inherit;


  • clip-source - Defines a URL to an SVG <clipPath> element.
  • basic-shape - Clips an element to a basic shape: circle, ellipse, polygon or inset.
  • margin-box - Uses the margin box as the reference box.
  • border-box - Uses the border box as the reference box.
  • padding-box - Uses the padding box as the reference box.
  • content-box - Uses the content box as the reference box.
  • fill-box - Uses the object bounding box as reference box.
  • stroke-box - Uses the stroke bounding box as reference box.
  • view-box - Uses the SVG viewport as reference box.
  • none - This is default. No clipping is done.
  • initial - Sets this property to its default value.
  • inherit - Inherits this property from its parent element.

color-mix

The color-mix() functional notation takes two <color> values and returns the result of mixing them in a given colorspace by a given amount.


color-mix(method, color1[ p1], color2[ p2])
  • method - The method is the <color-interpolation-method>, including the color space preceded by in, optionally followed by a <hue-interpolation-method>.
  • color1, color2 - <color> values to mix.
  • p1, p2 - <percentage> values between 0% and 100%, specifying the amount of each color to mix.


p1, p2 are normalized as follows:

  1. If both p1 and p2 are omitted, then p1 = p2 = 50%.
  2. If p1 is omitted, then p1 = 100% - p2.
  3. If p2 is omitted, then p2 = 100% - p1.
  4. If p1 = p2 = 0%, the function is invalid.
  5. If p1 + p2 ≠ 100%, then p1' = p1 / (p1 + p2) and p2' = p2 / (p1 + p2), where p1' and p2' are the normalization results.

cursor

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


Property Values

  1. alias - The cursor indicates an alias of something is to be created
  2. all-scroll - The cursor indicates that something can be scrolled in any direction
  3. auto - Default. The browser sets a cursor
  4. cell - The cursor indicates that a cell (or set of cells) may be selected
  5. col-resize - The cursor indicates that the column can be resized horizontally
  6. context-menu - The cursor indicates that a context-menu is available
  7. copy - The cursor indicates something is to be copied
  8. crosshair - The cursor render as a crosshair
  9. default - The default cursor
  10. e-resize - The cursor indicates that an edge of a box is to be moved right (east)
  11. ew-resize - Indicates a bidirectional resize cursor
  12. grab - The cursor indicates that something can be grabbed
  13. grabbing - The cursor indicates that something can be grabbed
  14. help - The cursor indicates that help is available
  15. move - The cursor indicates something is to be moved
  16. n-resize - The cursor indicates that an edge of a box is to be moved up (north)
  17. ne-resize - The cursor indicates that an edge of a box is to be moved up and right (north/east)
  18. nesw-resize - Indicates a bidirectional resize cursor
  19. ns-resize - Indicates a bidirectional resize cursor
  20. nw-resize - The cursor indicates that an edge of a box is to be moved up and left (north/west)
  21. nwse-resize - Indicates a bidirectional resize cursor
  22. no-drop - The cursor indicates that the dragged item cannot be dropped here
  23. none - No cursor is rendered for the element
  24. not-allowed - The cursor indicates that the requested action will not be executed
  25. pointer - The cursor is a pointer and indicates a link
  26. progress - The cursor indicates that the program is busy (in progress)
  27. row-resize - The cursor indicates that the row can be resized vertically
  28. s-resize - The cursor indicates that an edge of a box is to be moved down (south)
  29. se-resize - The cursor indicates that an edge of a box is to be moved down and right (south/east)
  30. sw-resize - The cursor indicates that an edge of a box is to be moved down and left (south/west)
  31. text - The cursor indicates text that may be selected
  32. URL - A comma separated list of URLs to custom cursors. Note: Always specify a generic cursor at the end of the list, in case none of the URL-defined cursors can be used
  33. vertical-text - The cursor indicates vertical-text that may be selected
  34. w-resize - The cursor indicates that an edge of a box is to be moved left (west)
  35. wait - The cursor indicates that the program is busy
  36. zoom-in - The cursor indicates that something can be zoomed in
  37. zoom-out - The cursor indicates that something can be zoomed out
  38. initial - Sets this property to its default value.
  39. inherit - Inherits this property from its parent element.