# Gradient ideas for twelve industries, with codes [Canonical HTML page](https://gradiently.design/guide/gradient-ideas-by-industry) A café should not look like a bank, and a bank should not look like a nightclub. Twelve industries, twelve gradients built for their mood, and the design each one does best. ## The short version - The best gradient ideas start from what a business sells and how it wants people to feel, not from whichever gradient is fashionable. - Warm, dark gradients suit cafés and fitness; soft, low-contrast gradients suit beauty and wellness; deep, cool gradients suit finance and tech. - Most industries have one expected gradient, such as blue to violet for tech, so adding one unexpected colour or a texture is what makes yours recognisable. - Every gradient idea needs a design it does well: a menu post for a café, a countdown for a gym, a clean announcement for a finance firm. - Keep text on the calmest part of the gradient and use one flat colour from it for small sizes and logos. Good **gradient ideas** fit the business before they fit the trend. The colours, the contrast and the direction should say something about what you sell: warm and toasted for a café, hot and fast for a gym, deep and steady for a finance firm. Below are twelve industries, each with a gradient you can copy, a palette and the kind of design it suits best. Use them as starting points, then make them yours with the ideas at the end. - Cafés: Espresso crema: `linear-gradient(160deg, #3b2418 0%, #8a5a3b 50%, #e8d3b9 100%)` - Music: Late set: `linear-gradient(180deg, #0d0d12 0%, #1e2a78 60%, #00e0c6 100%)` - Events: Spotlight: `radial-gradient(circle at 30% 20%, #ff3d8b 0%, #6a1b9a 45%, #120824 80%)` - Fitness: Heat: `linear-gradient(135deg, #ff5a1f 0%, #ff1f5a 55%, #2a0a2e 100%)` - Beauty: Blush clay: `linear-gradient(160deg, #f6e7e1 0%, #eec1c0 50%, #c98b86 100%)` - Wellness: Sage mist: `linear-gradient(180deg, #e7efe6 0%, #b9cdb5 50%, #7f9c86 100%)` - Tech: Deep signal: `linear-gradient(135deg, #0a0f2c 0%, #1d4ed8 50%, #22d3ee 100%)` - Finance: Harbour: `linear-gradient(160deg, #0f1c2e 0%, #1f4e5f 60%, #5f9e8f 100%)` - Education: Fresh page: `linear-gradient(135deg, #0e7c66 0%, #3fb68b 55%, #e8f5c8 100%)` - Fashion: Ink to ecru: `linear-gradient(180deg, #111111 0%, #3a3632 55%, #e9e2d6 100%)` - Property: Limestone sky: `linear-gradient(180deg, #cfe3f3 0%, #f3ede4 60%, #b9a48c 100%)` - Nonprofits: Warm hope: `linear-gradient(135deg, #e36b5d 0%, #f28c38 50%, #f6c35b 100%)` Twelve gradient ideas, one per industry. Each is explained in its section below. ## Gradient ideas for cafés, music and events ### Cafés and restaurants Food wants warmth. Espresso crema runs from a roasted brown through caramel to a milky cream, so it reads as coffee before anyone sees a cup. Put the menu or the daily special on the light end in dark brown type. The design it does best is a simple menu post with one headline and a price. [Restaurant branding](https://gradiently.design/guide/cafe-restaurant-branding) covers the rest of the identity. - Espresso: #3b2418 - Caramel: #8a5a3b - Crema: #e8d3b9 - Milk: #faf4ec - Tomato accent: #c8553d Café palette. The tomato accent is for prices and specials only. ### Music Music artwork usually lives small, as a square in a player, so it needs a strong dark and one bright colour that survives at thumbnail size. Late set climbs from near-black through indigo to an acid teal, like light spilling onto a stage. Use it for playlist covers at 1080×1080 and release announcements. ### Events Events borrow from stage lighting: a hot pink spotlight falling off into violet and black. A radial gradient does this better than a linear one, because it has a source. Place the event name in the dark area and the date in the light. [Event branding](https://gradiently.design/guide/event-branding) shows how to carry it from poster to wristband. A portrait café post reading Oat flat white, all day Café idea: one line, one offer, a warm ground. A vertical event story reading Doors at nine with ticket details Event idea: a story with the time big and the details small. ## Gradient ideas for fitness, beauty and wellness ### Fitness Fitness gradients should feel like effort: hot orange into a red-pink, fading to a dark plum. The diagonal adds movement. White type reads well on the dark corner, so put numbers there, such as reps, times and class dates. Countdown posts and challenge announcements are its natural home. ### Beauty Beauty wants skin-close colour: porcelain, blush and a rose clay, with low contrast between steps so the gradient feels soft rather than graphic. A deep plum is the grown-up anchor for type and logos. It suits product drops and before-and-after posts, and it pairs well with a fine grain. - Porcelain: #f6e7e1 - Blush: #eec1c0 - Rose clay: #c98b86 - Nude: #d9b8a0 - Plum: #5e2a3f Beauty palette. Four soft tones and one deep plum for words. ### Wellness Wellness is about slowing down, so its gradient should be the calmest here: pale mist to sage, top to bottom, with barely any contrast. Keep the type dark green rather than black. A single quote or breathing prompt on a story is the design it was made for. A portrait fitness post reading Six weeks to your first 10K Fitness idea: a countdown turns a class into a goal. A vertical story with the line Breathe out slower than in Wellness idea: one calm line with space around it. ## Gradient ideas for tech, finance and education ### Tech Tech gradients are the most crowded in any industry: navy to blue to violet is everywhere. Deep signal keeps the navy and blue for trust but ends in cyan instead of violet, which is enough to step out of the pack. It suits launch graphics, changelog posts and Open Graph images at 1200×630. ### Finance Money needs calm and weight. Harbour moves from an ink navy through a petrol blue to a sage teal, with brass as a small accent for figures and headlines. It avoids the bright greens of stock charts, which can read as alarm as easily as growth. Keep layouts simple: one number, one sentence. - Ink navy: #0f1c2e - Harbour: #1f4e5f - Sage teal: #5f9e8f - Paper: #f4f1ea - Brass: #c9a24a Finance palette. Paper is the light ground for reports; brass is for one figure per page. ### Education Education should feel fresh and encouraging without looking childish. Fresh page runs from a deep green through a spring green to a pale lime, like a new exercise book, with a yellow highlighter accent (#ffd84d) for key words. Use it for list posts, revision tips and course announcements. A portrait post titled Three ways to revise smarter in a list layout Education idea: a list post that people save and come back to. ## Gradient ideas for fashion, property and nonprofits ### Fashion Fashion lets the clothes carry the colour, so its gradient is quiet and editorial: ink black through a warm charcoal to ecru, like a studio backdrop. It frames product photos rather than competing with them. Product drops and lookbook covers are where it shines, set in one elegant typeface. A portrait fashion post announcing The autumn edit, new in Fashion idea: a product drop where the background frames rather than shouts. ### Property Property sells light and space. Limestone sky starts with a pale blue sky, passes through a warm plaster white and settles on sandstone, like a sunlit facade. Keep listing text in a deep slate. It works on 16:9 slides at 1920×1080 and on listing banners where photos sit on top. ### Nonprofits Nonprofits need warmth and hope without looking like a sale. Warm hope runs from coral through orange to gold, and a deep teal gives type and logos a serious anchor. It suits appeal posts, impact numbers and event invitations, where the message matters more than the design. - Deep teal: #0f4c5c - Coral: #e36b5d - Sunrise: #f28c38 - Warm gold: #f6c35b - Cream: #fbf3e4 Nonprofit palette. Deep teal for words, the warm three for the gradient, cream for long reading. ## How to make an industry gradient your own Every industry has an expected gradient, and using it tells people what you do. That is useful, but it also makes you look like everyone else in your category. The trick is to keep the expected mood and change one thing: a colour, a texture or the way it moves. [Color psychology](https://gradiently.design/guide/color-psychology) explains why moods and colours line up, and [gradient branding](https://gradiently.design/guide/gradient-branding) shows how to turn one into an identity. | Industry | The expected gradient | One twist to try | | --- | --- | --- | | Tech | Navy to blue to violet | End in cyan or lime instead of violet | | Finance | Navy to bright blue | Petrol and sage, with a brass accent | | Fitness | Red to orange | Fade to dark plum for depth | | Beauty | Pale pink to white | Add rose clay and a fine grain | | Wellness | Light green to white | Mist to sage, with dark green type | | Cafés | Plain brown | Espresso to crema with a tomato accent | Keep the mood the industry expects, change one element. Whichever gradient you choose, test it with real words on it before you commit; [text on a gradient](https://gradiently.design/guide/text-on-gradient) covers where type should sit. If you would rather own a look nobody else in your industry can use, the Gradiently [Market](/market) holds Marks with exactly one owner each, and you can design with any of them before you claim one. ## FAQ ### What gradient colours suit a café or restaurant? Warm browns and creams, such as espresso #3b2418 to caramel #8a5a3b to crema #e8d3b9, with one small warm accent for prices and specials. ### What gradient works for a finance brand? Deep, calm cool tones such as ink navy, petrol blue and sage teal, with a small brass or gold accent. Keep contrast high for numbers. ### How do I stop my tech gradient looking like everyone else's? Keep the navy and blue that signal trust, but replace the usual violet with a less expected colour such as cyan or lime, or add a texture like grain. ### Which gradients suit wellness and beauty brands? Soft, low-contrast gradients: mist to sage for wellness, porcelain to blush to rose clay for beauty. Pair them with a deep anchor colour for type. ### Should a gradient match my industry at all? Partly. Matching the expected mood helps people understand what you do, while changing one element, a colour, texture or motion, makes you recognisable within it.