LogoLogo
NFTEmbedGravitonHelp
  • 🖼️NFT Embed
  • Intro
    • 🤔What is NFT Embed?
    • 🔢How to use NFT Embed
    • 🎛️Embed Features
    • ❓FAQs
  • Custom Styling
    • Using Custom Styles (CSS)
    • Fonts and Colors
      • Fonts
      • Colors
    • Spacing and Orientation
      • Padding
      • Margins
      • Alignments
    • Code Examples
      • Full Code with Comments
    • Tips for Customization
  • Details
    • ⚙️Features
      • 🧑‍⚖️Auctions
      • 🧑‍🎨Collections
      • 🤝Finders Fee
      • 🏪Marketplace
        • Collection Royalties
      • ⚛️React SDK
    • 🧰Implementations
      • 🔳SquareSpace
      • 🔡WebFlow
      • 🛍️Shopify
  • Resources
    • 🛠️Tools
    • 🙋Support
  • 📩Contact Us
  • 🧲Graviton
  • 🎨NFT Embed
Powered by GitBook
On this page
  • Background Color
  • Font Color
  • Gradients
  • Code Presets

Was this helpful?

  1. Custom Styling
  2. Fonts and Colors

Colors

The color property is used to set the color of fonts, backgrounds and other components.

Colors are specified by either:

  • Standard color name: "red"

  • HEX value: "#ff0000"

  • RGB value: "rgb(255,0,0)"

Background Color

To adjust the background color of elements, utilize “backgroundColor”

    "backgroundColor": "black", // the color of an elements background

Font Color

To adjust the color of text and other elements, utilize “color”

 },
  "metadata": { // metadata properties box = MPB
    "backgroundColor": "black", 
    "fontSize": "12px", 
    "color": "white",                                     
    "margin": "0.2rem", 

Gradients

To harness unique color designs/transitions, you can use gradients. Like the greenish-blue transition on the embed, they can get adjusted with the “background” variable.

They can also get incorporated wherever a color variable is present

how linear gradients work: linear-gradient(direction, color-stop1, color-stop2, ...)

"background": "linear-gradient(170deg, #bceb00 15.57%, #00eaea 84.88%)",

Code Presets

copy + paste within the brackets (...)

Colors

  • Any standard color of the rainbow will reflect

  • red, blue, green, purple, yellow, orange,

  • You may also use additional colors by appending the color with either light or dark

  • dark red light red etc.

  • darkred or lightyellow

Gradient Directions

  • 180deg, #bceb00 15.57%, #00eaea 84.88% = vertical

  • 360deg #bceb00 15.57%, #00eaea 84.88% = flipped vertical

  • to right, #bceb00 15.57%, #00eaea 84.88% = right facing

  • to left, #bceb00 15.57%, #00eaea 84.88% = left facing

  • to right, rgba(255,0,0,0), rgba(255,0,0,1) = gradient with transparency

Important: High contrast is critical for people who have imperfect vision. Some tools have the ability to measure and monitor contrast!

PreviousFontsNextSpacing and Orientation

Last updated 2 years ago

Was this helpful?