Blue and Black Background CSS

Live Blue and Black Background Examples

background: linear-gradient(135deg, #0066ff 0%, #000000 100%);

background: radial-gradient(circle, #00ccff 0%, #000000 70%);

background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 10px,
    #0066ff 10px,
    #0066ff 20px
), #000000;

background: #000000;
background-image: 
    radial-gradient(circle at 10% 20%, rgba(0, 102, 255, 0.8) 0%, transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(0, 204, 255, 0.6) 0%, transparent 40%);

background: linear-gradient(45deg, #000000 25%, #0066ff 25%, 
    #0066ff 50%, #000000 50%, #000000 75%, #0066ff 75%);
background-size: 40px 40px;
animation: slide 2s linear infinite;

background: conic-gradient(from 180deg at 50% 50%, 
    #0066ff 0deg, #000000 90deg, #00ccff 180deg, 
    #000000 270deg, #0066ff 360deg);

background: linear-gradient(135deg, transparent 25%, 
    rgba(0, 102, 255, 0.2) 25%, rgba(0, 102, 255, 0.2) 50%, 
    transparent 50%, transparent 75%, rgba(0, 102, 255, 0.2) 75%), #000000;
background-size: 50px 50px;

background: 
    radial-gradient(ellipse 600px 300px at 50% 0%, rgba(0, 102, 255, 0.5) 0%, transparent 100%),
    radial-gradient(ellipse 600px 300px at 50% 100%, rgba(0, 204, 255, 0.3) 0%, transparent 100%),
    #000000;

Advanced Blue and Black Techniques

background: 
    linear-gradient(90deg, rgba(0, 102, 255, 0.1) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 102, 255, 0.1) 1px, transparent 1px);
background-size: 30px 30px;

.glass-blue {
    background: linear-gradient(135deg, 
        rgba(0, 102, 255, 0.1) 0%, 
        rgba(0, 0, 0, 0.8) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 102, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(0, 102, 255, 0.37);
}

.neon-blue {
    background: #000000;
    position: relative;
}

.neon-blue::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #0066ff, #00ccff, #0066ff);
    border-radius: inherit;
    filter: blur(20px);
    opacity: 0.8;
    z-index: -1;
    animation: neon-pulse 3s ease-in-out infinite;
}

@keyframes neon-pulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

Picking a Blue That Reads Well on Black

Blue is the easiest cool color to combine with black, but the range is enormous: from a near-cyan #00ccff that looks electric, through a saturated cobalt #0066ff, down to a deep navy #0a1a3a that's basically a tinted black. Most production "blue and black" interfaces — dashboards, fintech apps, dev tooling — sit in the cobalt-to-mid-blue range because that's where the color stays legible against pure black without becoming a glow effect.

If your blue is for body text or icons, aim for a lightness around 60–70% so it clears WCAG AA against #000. If it's purely decorative (a glow, a gradient, an underline), you have much more freedom.

Three Blue-on-Black Patterns That Hold Up

1. Navy hero with a cobalt accent. Background sits at #0a1a3a or similar; cobalt (#1a73e8, #0066ff) is reserved for buttons and links. Reads as serious, professional, and works without any animation.
2. Cobalt-to-black radial spotlight. A single radial-gradient(circle at 30% 30%, #0066ff 0%, #000 60%) behind hero copy. Cheap, no images, holds focus. Good for landing pages.
3. Multi-stop linear gradient through midnight. A 180° gradient #000 → #0a1530 → #1a2a55. Three stops are essential here — two-stop gradients in this range banded badly on 8-bit displays.

Common Mistakes

• Pure cobalt links on pure black. #0000ff on #000 is famously hard to read — the contrast ratio is around 2.4:1, well below AA. Lighten the link color (try #5fa8ff) or add a subtle glow.
• Gradients that look smooth in design tools but band in browsers. Adobe and Figma render gradients with dithering that browsers don't always replicate. Always check in a real browser at 100% zoom on a real display before signing off.
• Forgetting color-scheme. If your page is dark-by-default, declare color-scheme: dark in the root so form controls and scrollbars adopt dark UI rather than rendering as bright white panels on a black page.
• Animating background. Browsers do not interpolate background-image gradients smoothly. To animate a gradient, animate a child element's opacity or transform, or use a ::before pseudo-element layered with two pre-rendered gradients.

Blue and Black for Dashboards and Data UI

The reason blue-and-black dominates dev tooling and fintech is that pure black surfaces let blue accents carry data meaning without the blue having to compete with a colored background. A common pattern: #000 or #0a0a0a page background, #101a2c card surfaces, accent blues like #3a86ff for primary metrics, and a desaturated blue (#5a7090) for secondary labels. The gap between accent and label keeps the hierarchy obvious without piling on more colors.

For a calmer cousin of this palette, see dark backgrounds. For motion-heavy variants, see animated backgrounds and parallax backgrounds. For applying these gradients to hero photos, see background blend modes.