Learn CSS daily

css coffee
starStar on GithubdownloadInstall Chrome PlugIn

Generate Your Own Playground

Type any CSS property and get a live, editable playground instantly.

mix-blend-mode
.container {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
  background: #FFFFFF;
}

.background {
  background: url('https://via.placeholder.com/300x200/FF5733/FFFFFF?text=Background') no-repeat center;
  width: 100%;
  height: 100%;
}

.blend {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  mix-blend-mode: multiply;
}

The 'mix-blend-mode' CSS property defines how an element's content should blend with its background. It allows for creative visual effects by controlling how colors and images interact with one another based on the blending mode applied. This property can create striking graphics and enhance the overall aesthetic of a webpage.

min-width
.container {
  width: 100%;
  background-color: #f0f0f0;
  padding: 20px;
}

.box {
  min-width: 200px;
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  text-align: center;
  border: 2px solid #388E3C;
  transition: width 0.3s;
}

.box:hover {
  width: 300px;
}

The 'min-width' CSS property sets the minimum width of an element. This means that the element cannot be narrower than the specified value, regardless of the content inside it. It is useful for ensuring that elements maintain a certain size for better layout control, especially in responsive designs.

min-inline-size
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}

.box {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  min-inline-size: 200px; /* Sets a minimum width */
  border-radius: 5px;
  text-align: center;
  transition: width 0.3s;
  width: 150px; /* Initial width less than min-inline-size */
}

.box:hover {
  width: 300px; /* Expands to a width greater than min-inline-size on hover */
}

The 'min-inline-size' CSS property sets the minimum size of an element in the inline direction, which is determined by the writing mode. This property is useful for ensuring that elements do not shrink below a specified width, allowing for better control over layout and readability in responsive designs.

min-height
.container {
  background-color: lightblue;
  min-height: 200px;
  padding: 20px;
  border: 2px solid blue;
  text-align: center;
}

The 'min-height' CSS property sets the minimum height of an element. If the content inside the element exceeds this height, the element will expand to fit the content. This property is useful for ensuring that elements maintain a consistent size, even when they contain varying amounts of content.

min-block-size
.container { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; } .box { background-color: #4CAF50; color: white; padding: 20px; min-block-size: 100px; min-height: 100px; width: 200px; text-align: center; }

The 'min-block-size' CSS property defines the minimum size of an element in the block direction (vertical for a block-level element). It ensures that the element cannot be smaller than the specified value, even if the content would normally allow it to shrink. This property is particularly useful for maintaining layout integrity in responsive designs.