Aurora Dim — Playground

{CF} CodeFronts Back to CSS Dark Mode UI Aurora Dim Pure CSS

Edit any tab — preview updates live

.dm-aurora-bg {
  position: relative; padding: 32px;
  border-radius: 16px; overflow: hidden;
  background: #0a0a14;
}
.dm-aurora-bg::before {
  content: '';
  position: absolute; inset: -20%;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(139, 92, 246, 0.4), transparent 50%),
    radial-gradient(ellipse at 70% 70%, rgba(236, 72, 153, 0.3), transparent 50%);
  filter: blur(32px);
  pointer-events: none;
}
.dm-aurora {
  position: relative;
  background: #14141f;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex; align-items: center; gap: 14px;
}
.dm-aurora__icon {
  width: 38px; height: 38px;
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  border-radius: 10px;
  display: grid; place-items: center;
  color: #fff;
  font-size: 16px;
  flex-shrink: 0;
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.5);
}
.dm-aurora__body { display: flex; flex-direction: column; gap: 3px; }
.dm-aurora__body b    { font: 700 13px system-ui, sans-serif; color: #fff; }
.dm-aurora__body span { font: 12px system-ui, sans-serif; color: #94a3b8; }

Live preview Ready