Generate Your Own Playground
Type any CSS property and get a live, editable playground instantly.
.container { background-color: #4CAF50; padding: 20px; text-align: center; }
.title { color: white; }
.description { opacity: 0.5; color: white; font-size: 18px; }The CSS 'opacity' property is used to control the transparency level of an element. It accepts values between 0.0 (completely transparent) and 1.0 (completely opaque). This property can create visually appealing effects such as overlays or fading elements in and out.
.container { width: 200px; height: 200px; position: relative; overflow: hidden; }
.box {
width: 50px;
height: 50px;
background-color: #3498db;
position: absolute;
animation: move 4s infinite;
offset-path: path('M 0 0 Q 100 200 200 0');
offset-rotate: auto;
}
@keyframes move {
0% { offset-distance: 0%; }
100% { offset-distance: 100%; }
}The 'offset-rotate' CSS property is used to apply a rotation transformation to an element in the context of a CSS offset path. This property is particularly useful when animating elements along a path, allowing for dynamic and visually appealing effects. By specifying an angle, you can control the rotation of the element as it moves along its defined path.
.container { position: relative; width: 300px; height: 300px; border: 2px solid #000; } .box { position: absolute; width: 100px; height: 100px; background-color: coral; offset-position: 50px 50px; transform: translate(50px, 50px); }The 'offset-position' property in CSS defines the position of an element's offset container. It determines how the element is positioned relative to its offset parent, allowing for precise control over its placement in the layout. This property is particularly useful in conjunction with the 'position' property to create complex layouts and animations.
.container { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #f0f0f0; }
.moving-box { width: 50px; height: 50px; background-color: #3498db; animation: move 5s infinite; offset-path: path('M 0 0 Q 50 100, 100 0'); offset-distance: 0%; }
@keyframes move { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } }The 'offset-path' property in CSS allows you to define a custom path for an element to follow during animations. This property is particularly useful for creating smooth and dynamic movement along predefined paths, enhancing the visual experience of web applications.
.container { width: 300px; height: 300px; position: relative; border: 2px solid #333; overflow: hidden; } .moving-box { width: 50px; height: 50px; background-color: red; position: absolute; offset-path: path('M 0 0 L 300 0 L 300 300 L 0 300 Z'); animation: move 4s linear infinite; offset-distance: 0%; } @keyframes move { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } }The 'offset-distance' property in CSS is used with the 'offset-path' property to control the distance of an element along a defined path. This allows for smooth animations and positioning of elements along a specified route, making it useful for creating dynamic layouts and effects.