.dot width: 12px; height: 12px; background: rgba(255,255,255,0.5); border-radius: 50%; cursor: pointer; transition: all 0.2s ease; backdrop-filter: blur(2px); border: none;
/* overlay for better text contrast */ .slide::before content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.4) 70%, rgba(0,0,0,0.2) 100%); z-index: 1; hero slider codepen
Best for: Speed demons and no-JS zones.