> ## Documentation Index
> Fetch the complete documentation index at: https://docs.quickreel.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Subtitle Style

> We supports a variety of subtitle styles, allowing you to customize the appearance of subtitles in your videos. This flexibility enables you to create subtitles that match your video's aesthetic or align with specific themes.

<div
  style={{
display: "flex",
flexWrap: "wrap",
gap: "12px",
}}
>
  {" "}

  <div style={{ textAlign: "center" }}>
    <img
      src="https://d4up8b6dpeb61.cloudfront.net/gifs/cinematic.gif"
      alt="Cinematic"
      style={{
  width: "100%",
  maxWidth: "170px",
  borderRadius: "12px",
  margin: "0",
  padding: "0",
}}
    />

    <h3 style={{ marginTop: "5px", paddingTop: "0" }}>Cinematic</h3>
  </div>

  <div style={{ textAlign: "center" }}>
    <img
      src="https://d4up8b6dpeb61.cloudfront.net/gifs/harmozi.gif"
      alt="Harmozi"
      style={{
  width: "100%",
  maxWidth: "170px",
  borderRadius: "12px",
  margin: "0",
  padding: "0",
}}
    />

    <h3 style={{ marginTop: "5px", paddingTop: "0" }}>Harmozi</h3>
  </div>

  <div style={{ textAlign: "center" }}>
    <img
      src="https://d4up8b6dpeb61.cloudfront.net/gifs/pulse.gif"
      alt="Pulse"
      style={{
  width: "100%",
  maxWidth: "170px",
  borderRadius: "12px",
  margin: "0",
  padding: "0",
}}
    />

    <h3 style={{ marginTop: "5px", paddingTop: "0" }}>Pulse</h3>
  </div>

  <div style={{ textAlign: "center" }}>
    <img
      src="https://d4up8b6dpeb61.cloudfront.net/gifs/filler.gif"
      alt="Filler"
      style={{
  width: "100%",
  maxWidth: "170px",
  borderRadius: "12px",
  margin: "0",
  padding: "0",
}}
    />

    <h3 style={{ marginTop: "5px", paddingTop: "0" }}>Filler</h3>
  </div>

  <div style={{ textAlign: "center" }}>
    <img
      src="https://d4up8b6dpeb61.cloudfront.net/gifs/whisperer.gif"
      alt="Whisperer"
      style={{
  width: "100%",
  maxWidth: "170px",
  borderRadius: "12px",
  margin: "0",
  padding: "0",
}}
    />

    <h3 style={{ marginTop: "5px", paddingTop: "0" }}>Whisperer</h3>
  </div>

  <div style={{ textAlign: "center" }}>
    <img
      src="https://d4up8b6dpeb61.cloudfront.net/gifs/marineShift.gif"
      alt="Marine Shift"
      style={{
  width: "100%",
  maxWidth: "170px",
  borderRadius: "12px",
  margin: "0",
  padding: "0",
}}
    />

    <h3 style={{ marginTop: "5px", paddingTop: "0" }}>Marine Shift</h3>
  </div>

  <div style={{ textAlign: "center" }}>
    <img
      src="https://d4up8b6dpeb61.cloudfront.net/gifs/sonic.gif"
      alt="Sonic"
      style={{
  width: "100%",
  maxWidth: "170px",
  borderRadius: "12px",
  margin: "0",
  padding: "0",
}}
    />

    <h3 style={{ marginTop: "5px", paddingTop: "0" }}>Sonic</h3>
  </div>

  <div style={{ textAlign: "center" }}>
    <img
      src="https://d4up8b6dpeb61.cloudfront.net/gifs/spotlight.gif"
      alt="Spotlight"
      style={{
  width: "100%",
  maxWidth: "170px",
  borderRadius: "12px",
  margin: "0",
  padding: "0",
}}
    />

    <h3 style={{ marginTop: "5px", paddingTop: "0" }}>Spotlight</h3>
  </div>

  <div style={{ textAlign: "center" }}>
    <img
      src="https://d4up8b6dpeb61.cloudfront.net/gifs/focusFlash.gif"
      alt="Focus Flash"
      style={{
  width: "100%",
  maxWidth: "170px",
  borderRadius: "12px",
  margin: "0",
  padding: "0",
}}
    />

    <h3 style={{ marginTop: "5px", paddingTop: "0" }}>Focus Flash</h3>
  </div>

  <div style={{ textAlign: "center" }}>
    <img
      src="https://d4up8b6dpeb61.cloudfront.net/gifs/inflate.gif"
      alt="Inflate"
      style={{
  width: "100%",
  maxWidth: "170px",
  borderRadius: "12px",
  margin: "0",
  padding: "0",
}}
    />

    <h3 style={{ marginTop: "5px", paddingTop: "0" }}>Inflate</h3>
  </div>

  <div style={{ textAlign: "center" }}>
    <img
      src="https://d4up8b6dpeb61.cloudfront.net/gifs/boxd.gif"
      alt="Boxd"
      style={{
  width: "100%",
  maxWidth: "170px",
  borderRadius: "12px",
  margin: "0",
  padding: "0",
}}
    />

    <h3 style={{ marginTop: "5px", paddingTop: "0" }}>Boxd</h3>
  </div>

  <div style={{ textAlign: "center" }}>
    <img
      src="https://d4up8b6dpeb61.cloudfront.net/gifs/productive.gif"
      alt="Productive"
      style={{
  width: "100%",
  maxWidth: "170px",
  borderRadius: "12px",
  margin: "0",
  padding: "0",
}}
    />

    <h3 style={{ marginTop: "5px", paddingTop: "0" }}>Productive</h3>
  </div>

  <div style={{ textAlign: "center" }}>
    <img
      src="https://d4up8b6dpeb61.cloudfront.net/gifs/beast.gif"
      alt="Beast"
      style={{
  width: "100%",
  maxWidth: "170px",
  borderRadius: "12px",
  margin: "0",
  padding: "0",
}}
    />

    <h3 style={{ marginTop: "5px", paddingTop: "0" }}>Beast</h3>
  </div>

  <div style={{ textAlign: "center" }}>
    <img
      src="https://d4up8b6dpeb61.cloudfront.net/gifs/impact.gif"
      alt="Impact"
      style={{
  width: "100%",
  maxWidth: "170px",
  borderRadius: "12px",
  margin: "0",
  padding: "0",
}}
    />

    <h3 style={{ marginTop: "5px", paddingTop: "0" }}>Impact</h3>
  </div>

  <div style={{ textAlign: "center" }}>
    <img
      src="https://d4up8b6dpeb61.cloudfront.net/gifs/fade.gif"
      alt="Fade"
      style={{
  width: "100%",
  maxWidth: "170px",
  borderRadius: "12px",
  margin: "0",
  padding: "0",
}}
    />

    <h3 style={{ marginTop: "5px", paddingTop: "0" }}>Fade</h3>
  </div>

  <div style={{ textAlign: "center" }}>
    <img
      src="https://d4up8b6dpeb61.cloudfront.net/gifs/typewriter.gif"
      alt="Typewriter"
      style={{
  width: "100%",
  maxWidth: "170px",
  borderRadius: "12px",
  margin: "0",
  padding: "0",
}}
    />

    <h3 style={{ marginTop: "5px", paddingTop: "0" }}>Typewriter</h3>
  </div>

  <div style={{ textAlign: "center" }}>
    <img
      src="https://d4up8b6dpeb61.cloudfront.net/gifs/vivid.gif"
      alt="Vivid"
      style={{
  width: "100%",
  maxWidth: "170px",
  borderRadius: "12px",
  margin: "0",
  padding: "0",
}}
    />

    <h3 style={{ marginTop: "5px", paddingTop: "0" }}>Vivid</h3>
  </div>

  <div style={{ textAlign: "center" }}>
    <img
      src="https://d4up8b6dpeb61.cloudfront.net/gifs/whisperer_2.gif"
      alt="Whisperer 2"
      style={{
  width: "100%",
  maxWidth: "170px",
  borderRadius: "12px",
  margin: "0",
  padding: "0",
}}
    />

    <h3 style={{ marginTop: "5px", paddingTop: "0" }}>Whisperer 2</h3>
  </div>

  <div style={{ textAlign: "center" }}>
    <img
      src="https://d4up8b6dpeb61.cloudfront.net/gifs/impact_2.gif"
      alt="Impact 2"
      style={{
  width: "100%",
  maxWidth: "170px",
  borderRadius: "12px",
  margin: "0",
  padding: "0",
}}
    />

    <h3 style={{ marginTop: "5px", paddingTop: "0" }}>Impact 2</h3>
  </div>

  <div style={{ textAlign: "center" }}>
    <img
      src="https://d4up8b6dpeb61.cloudfront.net/gifs/vortex.gif"
      alt="Fade"
      style={{
  width: "100%",
  maxWidth: "170px",
  borderRadius: "12px",
  margin: "0",
  padding: "0",
}}
    />

    <h3 style={{ marginTop: "5px", paddingTop: "0" }}>Invert</h3>
  </div>

  <div style={{ textAlign: "center" }}>
    <img
      src="https://d4up8b6dpeb61.cloudfront.net/gifs/whisperer
_2.gif"
      alt="Fade"
      style={{
  width: "100%",
  maxWidth: "170px",
  borderRadius: "12px",
  margin: "0",
  padding: "0",
}}
    />

    <h3 style={{ marginTop: "5px", paddingTop: "0" }}>Storyteller</h3>
  </div>
</div>