# Cyber Monday graphics: a look for the online-only sale [Canonical HTML page](https://gradiently.design/guide/cyber-monday-graphics) Cyber Monday happens almost entirely on screens, in inboxes and on checkout pages. Its graphics have a different job from Black Friday's, and they deserve their own, cooler look. ## The short version - Cyber Monday graphics work best with a cool, digital palette that is clearly related to your Black Friday look but visibly different from it. - Because Cyber Monday is an online sale, the website banner and the email header matter as much as the social posts. - Every Cyber Monday graphic should lead to one action, usually a link, and say plainly when the offer ends. - A narrow site banner needs a single short line, because it is read in under a second on the way to something else. - Electric blues, cyans and violets on a near black ground read as digital without needing circuit patterns or glitch effects. The best **Cyber Monday graphics** look unmistakably digital and point somewhere: a cool, electric palette on a dark ground, one short line, and a link. Cyber Monday is the online sale, so the work is not only social posts. It is the banner across your website, the header of the email that lands that morning, and the link preview people see when they share. Make all of them from one look and the day feels like an event rather than a repeat of Friday. ## How Cyber Monday differs from Black Friday Black Friday began as an in-store day, and its visuals still borrow from shop windows: warm colours, big signs. Cyber Monday was named for online shopping, and most of its graphics are seen on a phone a second before someone taps. That changes three things. ### Black Friday - Warm grounds, gold and ember - Built around the announcement - Feed posts and stories lead - Can run for several days ### Cyber Monday - Cool grounds, electric blue and cyan - Built around the click - Email, site banner and link previews lead - Usually one day, so urgency is real If you ran a Black Friday sequence, keep the type, the layout and the voice, and change the temperature. People should recognise you instantly and still see that something new has started. [Black Friday social media posts](https://gradiently.design/guide/black-friday-post-ideas) sets up that first half. ## Cyber Monday colours and palettes Digital does not need circuit boards, glitch effects or binary code in the background. Colour does it on its own. Light that seems to come from a screen, in blue, cyan or violet, against a deep ink ground, reads as online at once. Keep one accent and let the rest stay dark. - Screen blue: `radial-gradient(circle at 70% 25%, #38bdf8 0%, #0c4a6e 38%, #050b14 78%)` - Cyan glow: `radial-gradient(circle at 25% 70%, #22d3ee 0%, #164e63 40%, #04101a 80%)` - Indigo to cyan: `linear-gradient(135deg, #0b1026 0%, #3730a3 50%, #22d3ee 100%)` - Electric violet: `radial-gradient(circle at 80% 80%, #a855f7 0%, #3b0764 40%, #0a0614 80%)` Four Cyber Monday grounds. Each pairs a near black base with one colour of screen light. - Ink: #050b14 - Deep blue: #0c4a6e - Screen blue: #38bdf8 - Ice text: #e0f2fe - Friday gold: #d4a24c A palette that hands on from Black Friday: the gold accent stays, used small, while the ground turns blue. Neon looks thrilling on a dark phone and dreadful when it vibrates against itself. [Neon gradients](https://gradiently.design/guide/neon-gradients) covers how to keep bright colours clean, and [cyberpunk colour palettes](https://gradiently.design/guide/cyberpunk-colors) goes further if your brand can carry it. ## Cyber Monday banner for your website A website banner is read on the way to something else, so it gets one short line and a deadline. The thin strip above the navigation is the least intrusive version and works on every page. Here is one in plain CSS, with a fallback colour in case the gradient fails to load and text that stays light on every part of it. ```html ``` A slim announcement strip. The darkest colour sits at both ends and the light only in the middle, so the pale text keeps its contrast. For a full hero instead of a strip, design at 1920×1080 and keep the words in the left or centre third, where they survive cropping on smaller screens. [Website hero backgrounds](https://gradiently.design/guide/website-hero-background) covers sizing and performance. ## Cyber Monday email design For many shops the Cyber Monday email is the single most important graphic of the day. The header is 1200×600, and on a phone the first screen of an email often shows little more than that, so the offer belongs in its top half. Keep the words live in the email where you can, and use the header image for mood and the headline. A wide Cyber Monday email header with a blue gradient and the words Today only, 25% off An email header at 1200×600: the offer in the top half, where every inbox shows it. - Subject line and header should say the same thing in the same words. - Put one button under the header, not five. - Write the deadline with a time zone, especially if you sell abroad. - Check the header in dark mode, where some inboxes change the colours around it. [Email header design](https://gradiently.design/guide/email-header-design) has more on sizes and dark mode quirks. ## Cyber Monday posts and stories On social, Cyber Monday is short, so two or three posts are plenty: a morning launch, a midday story reminder, and an evening last call. Each should send people to the link, so leave room in stories for the link sticker. A portrait Cyber Monday sale post with an electric blue gradient and the offer in large type The morning post: occasion, offer and deadline. A vertical story counting down the last six hours of a Cyber Monday sale The evening story, with space below for the link sticker. | Graphic | Size | Note | | --- | --- | --- | | Instagram post | 1080×1350 | Morning launch | | Story | 1080×1920 | Reminders with a link sticker | | Email header | 1200×600 | Offer in the top half | | Website hero | 1920×1080 | Words in the centre third | | Link preview | 1200×630 | Shown when the sale page is shared | Everything a one day online sale needs, in one look. Make all of these the week before, not on Monday morning. On the day you will want to watch orders and answer messages, and the only design change left should be swapping "Six hours left" for "One hour left" on the final story. > **Take it down on time** When the sale ends, remove the banner, swap the link preview back and archive the stories. A Cyber Monday banner still showing on Wednesday makes the deadline look like it was never real, and next year's will be believed a little less. The link preview is the one people forget. When someone shares your sale page, that image is the graphic their friends see, so set it for the day. [Open Graph image size](https://gradiently.design/guide/open-graph-image-size) shows how. With Pro, Gradiently resizes one finished design to every one of these formats in a single step, and the background keeps its calmest area behind the words at each size. ## FAQ ### When is Cyber Monday? Cyber Monday is the Monday after US Thanksgiving, so it always follows Black Friday weekend. Many shops run one offer from Friday to Monday and change the look for the final day. ### What colours are good for Cyber Monday graphics? Cool, screen-like colours such as electric blue, cyan and violet on a near black ground read as digital and set the day apart from Black Friday. ### What size is a Cyber Monday email header? 1200×600 pixels is a reliable size. Keep the offer in the top half, because that is the part people see first on a phone. ### Should Cyber Monday graphics match Black Friday? Keep the same type, layout and voice so people recognise you, and change the colour temperature so the new day feels new. ### What should a Cyber Monday website banner say? One short line with the offer and the deadline, linked to the sale page. A banner is glanced at, not read.