#bootstrap 5

Ough..., sorry, I forgot to test multiple classes. I removed twig |clean_class filter, because we have class validation in edit form. So it must be fine now.
https://www.drupal.org/project/ept_hero/releases/1.4.7 →

Hi Lev,

I added classes to the hero wrapper and dashes were added in between each class.

entered: gradient-radial ellipse bgsize-80-40 gradient-rainbow alpha-70
rendered: class="ept-container gradient-radial-ellipse-bgsize-80-40-gradient-rainbow-alpha-70"

Hi again, dunno if it helps because your code is structured very differently, but here is the twig file I generated. It never installed properly for me to be able to test, but it looks like it could have worked.

{#
  Bootstrap Hero
#}

{% set container_class = paragraph.field_container_class.value ?? '' %}
{% set headline_class = paragraph.field_headline_class.value ?? '' %}
{% set subheadline_class = paragraph.field_subheadline_class.value ?? '' %}
{% set body_class = paragraph.field_body_class.value ?? '' %}
{% set button_class = paragraph.field_button_class.value ?? '' %}

{# Gradient Builder #}
{% set gradient_type = paragraph.field_gradient_type.value ?? '' %}
{% set gradient_angle = paragraph.field_gradient_angle.value ?? '' %}
{% set stops = [] %}
{% for stop in paragraph.field_gradient_stops %}
  {# Access nested paragraph fields #}
  {% set color = stop.entity.field_stop_color.color|default('#000000') %}
  {% set pos = stop.entity.field_stop_position.value|default('') %}
  {% if pos %}
    {% set stops = stops|merge([color ~ ' ' ~ pos ~ '%']) %}
  {% else %}
    {% set stops = stops|merge([color]) %}
  {% endif %}
{% endfor %}
{% set gradient_css = '' %}
{% if gradient_type and stops|length > 0 %}
  {% if gradient_type == 'linear' %}
    {% set gradient_css = 'linear-gradient(' ~ (gradient_angle ?: '180deg') ~ ', ' ~ stops|join(', ') ~ ')' %}
  {% else %}
    {% set gradient_css = 'radial-gradient(' ~ (gradient_angle ?: 'ellipse at center') ~ ', ' ~ stops|join(', ') ~ ')' %}
  {% endif %}
{% endif %}

{# Multiple Background Images #}
{% set bg_images = [] %}
{% for media in paragraph.field_background_images %}
  {% if media.entity.field_media_image.entity.uri.value %}
    {% set bg_images = bg_images|merge(['url(' ~ file_url(media.entity.field_media_image.entity.uri.value) ~ ')']) %}
  {% endif %}
{% endfor %}

{% set background_style = '' %}
{% if gradient_css or bg_images|length > 0 %}
  {% set backgrounds = [] %}
  {% if gradient_css %}
    {% set backgrounds = backgrounds|merge([gradient_css]) %}
  {% endif %}
  {% if bg_images|length > 0 %}
    {% set backgrounds = backgrounds|merge(bg_images) %}
  {% endif %}
  {% set background_style = 'background-image: ' ~ backgrounds|join(', ') ~ ';' %}
{% endif %}

<section class="hero {{ container_class }}" style="{{ background_style }}">
  {% if paragraph.field_headline.value %}
  {% set headline_tag = paragraph.field_headline_tag.value|default('h2') %}
    <{{ headline_tag }} class="{{ headline_class }}">{{ paragraph.field_headline.value }}</{{ headline_tag }}>
  {% endif %}
  {% if paragraph.field_subheadline.value %}
    <h2 class="{{ subheadline_class }}">{{ paragraph.field_subheadline.value }}</h2>
  {% endif %}
  {% if paragraph.field_body.value %}
    <div class="{{ body_class }}">{{ paragraph.field_body.value }}</div>
  {% endif %}
  {% if paragraph.field_button_label.value and paragraph.field_button_url.uri %}
    <a href="{{ paragraph.field_button_url.uri }}" class="btn {{ button_class }}">
      {{ paragraph.field_button_label.value }}
    </a>
  {% endif %}

Thanks Lev, I have worked up a bunch of SASS mixins to generate some complex gradients using classes>
class="gradient-radial circle bgsize-farthest-corner gradient-sunset blend-screen"
I should just be able to drop them into the fields you made. It's pretty flexible!

The only downside to this is that the person creating the page would need to know it's possible since there is nothing in the UI to indicate how it can be done. Best I can do is train staff on it's usage, unless it's also possible to create custom list string fields to populate each variable for each repeatable BG image.

A guy can dream, but this works for now :)

THANK YOU!

Hey gmarez8, it's not tricky to generate CSS at all, you can check how DOM Box and Background color work and you can extend Field Widget with any fields with Drupal Form API. You get values from Drupal Form API and insert them in template preprocess and output in template as variable. A little bit messy, but when where will be a lot of code I will refactore it with plugins. For now it's OK to do it straightforward in functional way.

I can add these fields as well and make configuration form to enable this functionality in EPT Core if it's needed on site:
https://www.drupal.org/project/ept_core →
It's not hard to implement gradient generator like this:
https://www.w3schools.com/colors/colors_gradient.asp

Or find jquery/javascript library for generating gradient and include it with EPT Core.

Also, as an option, you can add Custom CSS field, generate gradient on another service and insert it:
https://cssgradient.io/

Lev, this is a wonderful addition! Thank you so much for adding this. I was trying to get my own module created using multiple background images (some of them being linear and radial gradients) but it was not working. It looks like now I can create a series of classes to apply much of those styles this way. Gradients might be tricky with CSS ordering, if it's even possible, but I will give it a shot.

Thank you again!

Hi gmarez8, I added fields for all wrappers in 'Elements additional classes' fieldset:

You can update module and use bootstrap classes for the wrappers:
https://www.drupal.org/project/ept_hero/releases/1.4.6 →