BauhausRadial · 2 stops
Explore palettes
Fire CSS gradients
Fire CSS gradients combining red, orange and golden-yellow stops in warm linear and radial blends, with no pink or cool-colour stops. These 24 selected examples come from the existing gradient library.
Gradient usage, contrast & CSS
Use this gradient.
Use a fire blend for a small focal accent, an illustration flame or an energetic graphic. Surround the warm colours with a calmer area for essential wording.
Text over gradients.
The yellow end can be far lighter than the red end. One foreground colour may fail somewhere along the blend, even when it works on the first stop.
CSS for Paprika & Lemon
background: radial-gradient(ellipse at 30% 25%, #DABF01 0%, #FA4D37 100%);
background: radial-gradient(ellipse at 30% 25% in oklab, #DABF01 0%, #FA4D37 100%);The first declaration supplies an sRGB fallback; the second interpolates in OKLab. Create a gradient with your own colours and stops.
Choose a name to preview. Click a blend to copy CSS.
The whole palette collection
Find your colours.
Getting the collection ready. Your results will appear here.
TRY ANOTHER IDEA
Your collection
Your savedpalettes
Preview, copy and share your colours.
0 saved palettes · kept in this browser
Use your saved colours.
Choose a name to preview. Click a colour to copy.
Share & export
All saved designs.
Keep a copy
Downloads your whole collection — designs, notes, name and journal — as one small file.
Pick a backup file to add its designs and journal to this browser. Nothing here is replaced.
Your collection lives only in this browser. Download it as one file; Restore brings a file back — here, or on another device.
J / K choose a palette.
L copy linkH HEX/ search
Saved palettes0
A place for the keepers
Meet your next favourite.
Find a palette you love. Hit Save. Make it yours.
Yours, right here. Saved in this browser on this device.
Pick a gradient.
Choose a name to preview. Click a blend to copy CSS.