Home › Templates › Purple Dots
Purple Dots
Deep purple with a fine dot grid, slightly darker toward the middle, for a poster or a thumbnail.
CSS
.gradient-container {
position: relative;
width: 100%;
height: 100vh;
background: radial-gradient(ellipse 1500px 900px at 0% 0%, #560069cc 0%, transparent 100%),
radial-gradient(ellipse 1500px 900px at 100% 100%, #560069cc 0%, transparent 100%),
radial-gradient(circle at 50% 50%, #000000 0%, #000000 100%),
#000000;
opacity: 1;
mix-blend-mode: normal;
}
.gradient-container::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
mix-blend-mode: overlay;
opacity: 1;
background-image: radial-gradient(circle, #ffffff 1px, transparent 1px), radial-gradient(circle, #ffffff 1px, transparent 1px);
background-size: 39px 39px;
}What is the Purple Dots gradient?
Deep purple with a fine dot grid, slightly darker toward the middle, for a poster or a thumbnail.
How to use Purple Dots
Customize this gradient in the studio, copy the CSS on this page, or download a marked 1920px PNG. 4K and SVG stay on Pro.
Related gradients
Sunrise BandsOrange at the core, then coral, then blue rings out to white, banded for a landing hero.
Canyon SunriseA hot magenta core fading to black at the edges, with a fine dot grid, for a launch hero that only needs one color.
Cyber Gold GridGold across the top, purple through the middle, near-black at the bottom, with a fine grid over the whole field.
Powder MeshAlmost white, with blush and lilac only at the edges, quiet enough for an editorial page.
Wave CausticsA black field with a pale gray sweep of light through the middle, for a dark thumbnail.
Low SunBurnt orange in one corner, peach across the middle, teal at the far edge, for a landing section that wants warm and cool in the same frame.
Purple CheckerViolet checker, brightest along the bottom edge and black in the top corner, for a social graphic.
VolcanicOrange and a streak of red coming out of black in one corner, loud on purpose, for thumbnails.
Signature NoiseSlate blue, mauve, and coral under heavy grain, a bright spot in the middle, for a landing page or a wallpaper.
Caustics DepthNear-black water with faint pale streaks, for a background that stays behind the type.
Amber MeshGold light pooled on dark navy, grain across the field, for a page that wants warmth without leaving black.
Ember BloomBurnt orange around a pale cream streak, grain over the mesh, for a warm hero.
Updated October 2026
