Vivid Halftone Spectrum Sweep
A vivid halftone CSS background with bold cobalt blue, crimson, golden yellow, and sage green spectrum sweeps. Ideal for hero sections, social banners, title slides, onboarding screens, splash pages, creative branding, retro-modern campaigns, and energetic digital visuals.
Vivid Halftone Spectrum Sweep
Mood & Aesthetic
Bold, electric, and unapologetically vibrant — Vivid Halftone Spectrum Sweep commands attention with a full-throttle sweep of primary colors that feels simultaneously retro and cutting-edge. Deep cobalt blue anchors the left, giving way to a luminous crimson arc that bleeds into warm golden yellow, while a cool sage green quietly grounds the right edge. The halftone dot texture layered across the entire composition adds a tactile, print-inspired grain that softens the intensity of the hues and evokes the nostalgia of mid-century graphic design — reimagined for the digital age. The result is a visual that feels energetic yet considered, loud yet structured.
Use Cases
This background is an ideal fit for brands that want to make an immediate, confident statement. Deploy it as a hero section backdrop for creative agencies, music platforms, or tech startups seeking a bold first impression. It works equally well as a social media banner or story background, where its saturated palette stops the scroll instantly. Presentation designers will find it perfect for title slides and section dividers, while app developers can leverage it for onboarding screens or splash pages that need personality without complexity. It also shines in print-to-digital crossover campaigns where a retro-modern aesthetic is the goal.
Technical Notes
This visual is constructed using layered CSS radial and conic gradients to produce the sweeping arc forms and color transitions, combined with a halftone dot pattern rendered via background-image using repeating radial gradients or SVG filters. CSS blend modes — likely multiply or screen — enable the rich color overlaps where the arcs intersect, creating depth without additional assets. What makes this piece distinctive is the seamless marriage of geometric precision and organic texture, achieving a complex, multi-layered aesthetic from pure CSS with no image dependencies.
CSS Code
CSS
.codioful {
background: conic-gradient(from 180deg at 25% 0%, rgba(10, 10, 10, 1.000) 0%, rgba(40, 5, 255, 1.000) 12.5%, rgba(29, 0, 209, 1.000) 12.75%, rgba(10, 10, 10, 1.000) 25%, rgba(255, 20, 147, 1.000) 37.5%, rgba(224, 0, 121, 1.000) 37.75%, rgba(10, 10, 10, 1.000) 50%, rgba(0, 206, 209, 1.000) 62.5%, rgba(0, 156, 158, 1.000) 62.75%, rgba(10, 10, 10, 1.000) 75%, rgba(255, 215, 0, 1.000) 87.5%, rgba(204, 172, 0, 1.000) 87.75%, rgba(10, 10, 10, 1.000) 100%), linear-gradient(120deg, rgba(128, 0, 128, 0.400) 0%, rgba(128, 0, 128, 0.200) 41.32%, rgba(128, 0, 128, 0.100) 76.24%, transparent 100%), repeating-radial-gradient(circle farthest-corner at 50% 50%, rgba(255, 69, 0, 0.250) 0%, rgba(255, 69, 0, 0.250) 36.09%, transparent 37.09%, transparent 100%), radial-gradient(circle farthest-corner at 25% 25%, transparent 0%, transparent 41.98%, rgba(0, 255, 255, 0.500) 42.18%, rgba(0, 255, 255, 0.500) 100%), conic-gradient(from 0deg at 75% 0%, rgba(26, 11, 46, 0.250) 0%, rgba(255, 0, 110, 0.250) 5.56%, rgba(204, 0, 88, 0.250) 5.81%, rgba(26, 11, 46, 0.250) 11.11%, rgba(131, 56, 236, 0.250) 16.67%, rgba(104, 21, 220, 0.250) 16.92%, rgba(26, 11, 46, 0.250) 22.22%, rgba(58, 134, 255, 0.250) 27.78%, rgba(7, 103, 255, 0.250) 28.03%, rgba(26, 11, 46, 0.250) 33.33%, rgba(6, 255, 165, 0.250) 38.89%, rgba(0, 210, 134, 0.250) 39.14%, rgba(26, 11, 46, 0.250) 44.44%, rgba(255, 190, 11, 0.250) 50%, rgba(215, 158, 0, 0.250) 50.25%, rgba(26, 11, 46, 0.250) 55.56%, rgba(251, 86, 7, 0.250) 61.11%, rgba(204, 68, 3, 0.250) 61.36%, rgba(26, 11, 46, 0.250) 66.67%, rgba(255, 0, 110, 0.250) 72.22%, rgba(204, 0, 88, 0.250) 72.47%, rgba(26, 11, 46, 0.250) 77.78%, rgba(131, 56, 236, 0.250) 83.33%, rgba(104, 21, 220, 0.250) 83.58%, rgba(26, 11, 46, 0.250) 88.89%, rgba(255, 0, 110, 0.250) 94.44%, rgba(204, 0, 88, 0.250) 94.69%, rgba(26, 11, 46, 0.250) 100%), linear-gradient(75deg, rgba(40, 5, 255, 0.750) 0%, rgba(40, 5, 255, 0.750) 34.58%, rgba(255, 20, 147, 0.750) 34.78%, rgba(255, 20, 147, 0.750) 64.54%, rgba(0, 206, 209, 0.750) 64.74%, rgba(0, 206, 209, 0.750) 86.63%, rgba(255, 215, 0, 0.750) 86.83%, rgba(255, 215, 0, 0.750) 100%), conic-gradient(from 300deg at 0% 0%, rgba(20, 20, 20, 0.750) 0%, rgba(40, 5, 255, 0.750) 25%, rgba(29, 0, 209, 0.750) 25.25%, rgba(20, 20, 20, 0.750) 50%, rgba(255, 20, 147, 0.750) 75%, rgba(224, 0, 121, 0.750) 75.25%, rgba(20, 20, 20, 0.750) 100%), linear-gradient(315deg, rgba(246, 117, 87, 1.000) 0%, rgba(250, 177, 160, 1.000) 50%, rgba(255, 255, 255, 1.000) 100%);
background-size: auto, auto, 10px 10px, auto, auto, auto, auto, auto;
background-blend-mode: color-dodge, multiply, color-burn, difference, exclusion, difference, multiply, normal;
}
/* Visual by codioful.com */Available formats
| Format | Size | Access |
|---|---|---|
| CSS | Responsive | Copy free |
| HD image | 1280 × 720 | Download free |
| Full HD image | 1920 × 1080 | Download free |
| Higher resolution | 2K, 4K, custom | Request |
License
You can use this visual for free in personal and commercial projects. Credit Codioful when you can. Need clean commercial use without attribution? Get a no-attribution license.
Frequently Asked Questions
You might also like
More backgrounds in the same style
Need help choosing a visual?
Copy this prompt into your AI assistant to find the right Codioful background style for your project.
Get 7 new background visuals every week
Fresh CSS and HD background visuals for websites, slides, ads, and social posts.
No spam. Just new visuals and useful updates.